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

Posted 2023-02-18

【中文标题】对象作为 React 子对象无效。如果您打算渲染一组子项，请改用数组 - 错误 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

【发布时间】：2020-07-31 14:16:45

【问题描述】：

我正在开发一个带有 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>

【问题讨论】：

您应该将代码发布为文本而不是屏幕截图。我认为这就是为什么你的票数被否决的原因。

非常感谢您的帮助！

试试console.log(result) 看看它是什么类型的对象。它必须是一个字符串，null 或一个反应组件实例。如果不是，那么让它成为其中之一，它应该可以工作......

如果我做这样的事情：(result: JSON.stringify(res)) 它会以 json 格式返回给我并显示它。这里的问题是我不想作为 json 我想找到其他方式来显示它。

【参考方案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 处理它有时可能会陷入严重的错误。

【讨论】：

感谢您的回答，但我完全按照您对我说的做了，但仍然无法正常工作。它向我抛出了这个错误：未处理的拒绝（TypeError）：result.map 不是函数。有什么我需要改变的吗？

@ThanasisDes，这意味着您的 ajax 请求不返回数组。 map 函数仅在数组下可用。

我在问题末尾添加了屏幕截图。您可以点击阅读。

@ThanasisDes，很明显这不是一个数组，它是一个对象。 API 设计不太好，后端开发者可以将0, 1 键作为数组传递并与timestamp 分开，你能改变后端的API 响应吗？