对象作为 React 子对象无效.如果您打算渲染一组子项，请改用数组 - Error Solidity - React [英] Objects are not valid as a React child. If you meant to render a collection of children, use an array instead - Error Solidity - React

问题描述

我正在使用 ReactJS 和 Solidity - 智能合约开发文档验证系统.我想在前端显示我的智能合约的 get().call() 方法的结果，有一个弹出窗口，甚至是一个简单的文本.我现在面临的问题是，当我尝试显示该方法的响应时，它向我抛出该错误:

<块引用>

对象作为 React 子对象无效.如果您打算渲染一组子项，请改用数组

这是我的solidity合约代码:

pragma solidity ^0.5.0;合同证明1{结构文件详细信息{uint256 时间戳；字符串所有者；}映射(字符串 => FileDetails)文件；事件日志FileAddedStatus(布尔状态，uint256 时间戳，字符串所有者，字符串文件哈希);函数集(字符串内存所有者，字符串内存fileHash)公共{if (files[fileHash].timestamp == 0) {文件[fileHash] = FileDetails(block.timestamp, owner);发出 logFileAddedStatus(true, block.timestamp, owner, fileHash);} 别的 {发出 logFileAddedStatus(false, block.timestamp, owner, fileHash);}}函数获取(字符串内存文件哈希)民众看法返回(uint256 时间戳，字符串内存所有者){return (files[fileHash].timestamp, files[fileHash].owner);}}

这是 onClick 方法中的 .get().call() 方法:

onSubmitGet = async (event) =>{event.preventDefault();const hash = document.getElementById("hash").value;this.state.design = 等待 this.state.contract.methods.get(哈希).call({ from: this.state.address }).then((res) => this.setState({ result: res }));};

这就是我用 React 显示结果的方式:

const { result } = this.state;<div>{结果}</div>

解决方案

我不知道你为什么写下面的代码:

this.state.design = await this.state.contract.methods

ReactJS 没有 two-way-data-binding，ReactJS 不像 VueJS 或 Angular，要改变状态，你应该使用 this.setState 或useState.this.state.design = 永远不会改变任何状态.

现在回答你的问题.为结果设置初始状态，如下所示:

this.state = {结果:未定义，};

然后在 JSX 中像下面这样写:

const { result } = this.state;<div>{结果&&result.map((item, index) => (<div key={item.uniqueThing}>{item.title}</div>))}

实际上，您不需要index，我只是想让您知道您可以拥有它.即使你可以写得更好:

const { result } = this.state;<div>{结果&&result.map(({ title, uniqueThing }) => (<div key={uniqueThing}>{title}</div>))}

注意:你一定要把key传递给map回调函数返回的第一个JSX元素，并且应该是唯一的，请不要使用index ReactJS 处理它的成本很高，可能有时会陷入坏错误.

I am developing a document verification system with ReactJS and solidity - smart contract. 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. 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. If you meant to render a collection of children, use an array instead

Here is the code of my solidity contract:

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:

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:

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 this.state.design = never change anything of states.

Now for your question. set the initial state for the result like below:

this.state = {
  result: undefined,
};

Then in the JSX write it like below:

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. 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.

这篇关于对象作为 React 子对象无效.如果您打算渲染一组子项，请改用数组 - Error Solidity - React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！