我正在使用以太坊 blochchain 和 ReactJS 开发一个 web 应用程序。在一个页面中,在 componentDidMount() 中,我从区块链收集数据并将其添加到名为 requests 的数组中
typeof(requests) : object
console.log(requests) :(2) [Result, Result]
0: Result
0: "Title"
1: "100000000000000"
2: "0xbA439F3C91bF0732e5546721A09be207f69555ca"
3: false
4: "0"
approvalCount: "0"
complete: false
description: "Title"
recipient: "0xbA439F3C91bF0732e5546721A09be207f69555ca"
value: "100000000000000"
__proto__: Object
1: Result
0: "New Request"
1: "4000000000000000000"
2: "0x8104Ce1f3d731A5C39501fddDdc14E2673555555"
3: false
4: "0"
approvalCount: "0"
complete: false
description: "New Request"
recipient: "0x8104Ce1f3d731A5C39501fddDdc14E2673555555"
value: "4000000000000000000"
__proto__: Object
length: 2
__proto__: Array(0)
我尝试使用以下代码根据请求的元素呈现组件:
<body>
{this.state.requests.map((request, index) => {
return (
<RequestRow
key={index}
id={index}
address={this.state.address}
request={request}
approversCount={this.state.approversCount}
/>
);
})}
</body>
但是出现这个错误
Error: Objects are not valid as a React child (found: object with keys {id, address, request, approversCount}). If you meant to render a collection of children, use an array instead.
如何解决这个问题?
RequestRow 未完成
它被实现为
import React from "react";
const requestRow = (props) => <div>{props}</div>;
export default requestRow;
答案 0 :(得分:1)
您不需要编写空数组条件的代码。你只需要写,
<body> {
this.state.requests.map((request, index) => {
return ( <RequestRow key = {
index
}
id = {
index
}
address = {
this.state.address
}
request = {
request
}
approversCount = {
this.state.approversCount
}
/>
);
});
}</body>
答案 1 :(得分:0)
感谢大家的评论和重播。感谢 Ajeet Shah 和 Priyank-Kachhela 指出错误。错误是由于 RequestRow 组件的实现而不是呈现它的方式。