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

上文web3 React dapp项目通过事件从区块链中拿到已取消已完成和所有的订单数据并存入redux中
中我们已经从区块中拿到了自己的订单
然后我们恢复一下上文的环境
ganache

ganache -d

在这里插入图片描述
然后登一下 MetaMask

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

truffle migrate --reset

在这里插入图片描述
然后我们运行一下测试脚本创建订单和转让交易所ETH与token

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组件更改代码如下

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 字段的配置
运行效果如下
在这里插入图片描述
虽然我们的数据出来了但他们的格式都有点问题我们都需要后期处理一下
我们先将代码改成这样

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点的秒
而不是毫秒
我们先终端执行

npm i --save moment

引入一下 moment
在这里插入图片描述
然后我们将代码改成这样

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>);
}