web3 从redux中拿出所有已完成订单并渲染到对应的Table列表中

上文web3 React dapp项目通过事件从区块链中拿到已取消已完成和所有的订单数据并存入redux中

中我们已经从区块中拿到了自己的订单

然后我们恢复一下上文的环境

ganache

javascript 复制代码

ganache -d

然后登一下 MetaMask

然后用我们的项目发布一下合约

javascript 复制代码

truffle migrate --reset

然后我们运行一下测试脚本创建订单和转让交易所ETH与token

javascript 复制代码

truffle exec .\scripts\test.js

然后我们运行起自己的dapp项目

然后我们找到 src下 components 目录下的 Order.jsx组件

我们引入一下我们写在 redux中的 order数据

这里我们拿取了我们之前在redux中的 order 订单内容

然后我们刷新一下看控制台

一开始他们都是空的然后后面数据就加载出来了

然后我们看这个数据结构主要有用的是 timestamp 一个创建时间的时间搓

然后 amountGet 对应的 grtoken 然后 amountGive 对应的 ETH

这样我们先通过 order 下的 Fillorders 渲染一下已完成的订单列表

找到 src下 components 目录下的 Order.jsx组件更改代码如下

typescript 复制代码

import React from 'react';
import { Card, Col, Row ,Table } from 'antd';
import {useSelector} from "react-redux"
export default function Order() {
  const order = useSelector(state => state.order)

  console.log(order)
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];
  
  const columns = [
    {
      title: 'ETH',
      dataIndex: 'amountGive'
    },
    {
      title: 'GrToken',
      dataIndex: 'amountGet'
    },
    {
      title: '创建时间',
      dataIndex: 'timestamp'
    },
  ];
  
  return (
    <div style = {{marginTop:'10px'}}>
      <Row>
         <Col span={8}>
          <Card title="已完成" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={order.Fillorders} columns={columns} />
          </Card>
         </Col>
         <Col span={8}>
          <Card title="我创建的" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={dataSource} columns={columns} />
          </Card>
         </Col>
         <Col span={8}>
          <Card title="其他交易中订单" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={dataSource} columns={columns} />
          </Card>
         </Col>
      </Row>
    </div>
  );
}

这样我们列表绑定了 order.Fillorders 并更改了 columns 字段的配置

运行效果如下

虽然我们的数据出来了但他们的格式都有点问题我们都需要后期处理一下

我们先将代码改成这样

typescript 复制代码

import React from 'react';
import { Card, Col, Row ,Table } from 'antd';
import {useSelector} from "react-redux"

function convert(unit) {
  return window.WebData ? unit&&window.WebData.web3.utils.fromWei(unit, "ether") : ""
}

export default function Order() {
  const order = useSelector(state => state.order)

  console.log(order)
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];
  
  const columns = [
    {
      title: 'ETH',
      dataIndex: 'amountGive',
      render:(amountGive)=><b>{ convert(amountGive) }</b>,
      key: 'amountGive',
    },
    {
      title: 'GrToken',
      dataIndex: 'amountGet',
      render:(amountGet)=><b>{ convert(amountGet) }</b>,
      key: 'amountGet',
    },
    {
      title: '创建时间',
      dataIndex: 'timestamp',
      key: 'timestamp',
    },
  ];
  
  return (
    <div style = {{marginTop:'10px'}}>
      <Row>
         <Col span={8}>
          <Card title="已完成" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={order.Fillorders} columns={columns} />
          </Card>
         </Col>
         <Col span={8}>
          <Card title="我创建的" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={dataSource} columns={columns} />
          </Card>
         </Col>
         <Col span={8}>
          <Card title="其他交易中订单" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={dataSource} columns={columns} />
          </Card>
         </Col>
      </Row>
    </div>
  );
}

我们将一个单位转换的 convert 函数搬了个来

然后对 amountGive 和 amountGet 进行单位的转换运行代码

这样我们的两个单位就好了

然后这个时间搓

其实他也不完全是个时间搓他是一个距离 1970年01月01号 0点的秒

而不是毫秒

我们先终端执行

javascript 复制代码

npm i --save moment

引入一下 moment

然后我们将代码改成这样

typescript 复制代码

import React from 'react';
import { Card, Col, Row ,Table } from 'antd';
import {useSelector} from "react-redux"
import moment from "moment"

function converTime(t){
  return moment(t*1000).format("YYYY/MM/DD")
}

function convert(unit) {
  return window.WebData ? unit&&window.WebData.web3.utils.fromWei(unit, "ether") : ""
}

export default function Order() {
  const order = useSelector(state => state.order)

  console.log(order)
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];
  
  const columns = [
    {
      title: 'ETH',
      dataIndex: 'amountGive',
      render:(amountGive)=><b>{ convert(amountGive) }</b>,
      key: 'amountGive'
    },
    {
      title: 'GrToken',
      dataIndex: 'amountGet',
      render:(amountGet)=><b>{ convert(amountGet) }</b>,
      key: 'amountGet'
    },
    {
      title: '创建时间',
      dataIndex: 'timestamp',
      render:(timestamp)=><div>{ converTime(timestamp) }</div>,
      key: 'timestamp'
    },
  ];
  
  return (
    <div style = {{marginTop:'10px'}}>
      <Row>
         <Col span={8}>
          <Card title="已完成" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={order.Fillorders} columns={columns} />
          </Card>
         </Col>
         <Col span={8}>
          <Card title="我创建的" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={dataSource} columns={columns} />
          </Card>
         </Col>
         <Col span={8}>
          <Card title="其他交易中订单" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={dataSource} columns={columns} />
          </Card>
         </Col>
      </Row>
    </div>
  );
}