[英]Objects are not valid as a React child. If you meant to render a collection of children, use an array instead - Error Solidity - React
I am developing a document verification system with ReactJS and solidity - smart contract.我正在开发一个带有 ReactJS 和solidity - 智能合约的文档验证系统。 I want to display the result of my smart contract's get().call()
method on the frontend, with a popup or even with a simple text.我想在前端显示我的智能合约的get().call()
方法的结果,带有弹出窗口甚至是简单的文本。 The problem I am facing now is that when I am trying to display the response of the method, it throws to me that error:我现在面临的问题是,当我尝试显示该方法的响应时,它会向我抛出该错误:
Objects are not valid as a React child.对象作为 React 子级无效。 If you meant to render a collection of children, use an array instead如果您打算渲染一组孩子,请改用数组
Here is the code of my solidity contract:这是我的solidity合约的代码:
pragma solidity ^0.5.0;
contract Proof1 {
struct FileDetails {
uint256 timestamp;
string owner;
}
mapping(string => FileDetails) files;
event logFileAddedStatus(
bool status,
uint256 timestamp,
string owner,
string fileHash
);
function set(string memory owner, string memory fileHash) public {
if (files[fileHash].timestamp == 0) {
files[fileHash] = FileDetails(block.timestamp, owner);
emit logFileAddedStatus(true, block.timestamp, owner, fileHash);
} else {
emit logFileAddedStatus(false, block.timestamp, owner, fileHash);
}
}
function get(string memory fileHash)
public
view
returns (uint256 timestamp, string memory owner)
{
return (files[fileHash].timestamp, files[fileHash].owner);
}}
Here is .get().call()
method inside onClick method:这是 onClick 方法中的.get().call()
方法:
onSubmitGet = async (event) => {
event.preventDefault();
const hash = document.getElementById("hash").value;
this.state.design = await this.state.contract.methods
.get(hash)
.call({ from: this.state.address })
.then((res) => this.setState({ result: res }));
};
And this is how I display the result with React:这就是我使用 React 显示结果的方式:
const { result } = this.state;
<div>{result}</div>
I don't know why you write the below code:我不知道你为什么写下面的代码:
this.state.design = await this.state.contract.methods
The ReactJS doesn't have two-way-data-binding
, The ReactJS is not like VueJS or Angular, for changing state you should use this.setState
or useState
. The ReactJS doesn't have two-way-data-binding
, The ReactJS is not like VueJS or Angular, for changing state you should use this.setState
or useState
. the this.state.design =
never change anything of states. this.state.design =
从不改变任何状态。
Now for your question.现在回答你的问题。 set the initial state for the result like below:为结果设置初始 state,如下所示:
this.state = {
result: undefined,
};
Then in the JSX write it like below:然后在 JSX 中编写如下:
const { result } = this.state;
<div>
{result && result.map((item, index) => (
<div key={item.uniqueThing}>{item.title}</div>
))}
</div>
Actually, you don't need index
, I just wanna aware you that you can have it.实际上,您不需要index
,我只是想知道您可以拥有它。 even you can write it better:即使你可以写得更好:
const { result } = this.state;
<div>
{result && result.map(({ title, uniqueThing }) => (
<div key={uniqueThing}>{title}</div>
))}
</div>
Note: you definitely should pass the key
to the first JSX element of the map callback function return, and it should be unique, please do not use index
it has a bad cost for ReactJS to handle it maybe sometimes fall into bad bugs.注意:您绝对应该将key
传递给 map 回调 function 返回的第一个 JSX 元素,并且它应该是唯一的,请不要使用index
它对 Z217C80CED5A5D142B0E105A8641 有不好的代价,有时会陷入错误的错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.