对象作为 React 子对象无效。如果您打算渲染一组子项，请改用数组 - 错误 Solidity - React

Question

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

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

这是我的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);
}}

这里是 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 }));
};

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

const { result } = this.state;

<div>{result}</div>

Answer 1

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

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

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

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

this.state = {
  result: undefined,
};

然后在 JSX 中编写如下：

const { result } = this.state;

<div>
  {result && result.map((item, index) => (
    <div key={item.uniqueThing}>{item.title}</div>
  ))}
</div>

其实你不需要index，我只是想知道你可以拥有它。即使你可以写得更好：

const { result } = this.state;

<div>
  {result && result.map(({ title, uniqueThing }) => (
    <div key={uniqueThing}>{title}</div>
  ))}
</div>

注意：你一定要把key传递给map回调函数返回的第一个JSX元素，而且应该是唯一的，请不要使用index，它的代价很糟糕让 ReactJS 处理它有时可能会陷入严重的错误。