错误：对象作为 React 子项无效（尽管仅使用一组对象属性渲染一个组件）

Question

我知道以前有人问过类似的问题，但似乎没有一个能解决这种情况的细微差别。

我正在编写一个将 prop 向下传递给组件的 react 应用程序。这个道具是一个对象数组。我只渲染一个子组件，而不是映射对象数组来渲染许多。

首先，我将状态设置为this.setState({ balancesMapping: balancesMapping });balancesMapping 是对象数组。

然后我构造要通过以下方式渲染的组件 <Sweep balance={this.state.balance} helpers={this.state.helpers} to={this.state.to} balancesMapping={this.state.balancesMapping}/>

此扫描组件采用 balancesMapping 数组并使用每个元素创建一个 Token 组件，如下所示：

const tokens = this.props.balancesMapping.map((balanceObj) => {return <Token balanceObj={balanceObj} account={this.props.account} to= {this.props.to}/>});

但是，我收到以下错误，之前已在本网站上讨论过：

错误：对象作为 React 子对象无效（找到：对象与键 {_hex，_isBigNumber}）。如果您打算渲染一组子项，请改用数组。

这对我来说没有意义，因为我只是将道具作为对象数组传递，我不想为数组中的每个元素创建 1:1 比例的扫描组件并且想要传递数组直接下来。

balancesMapping 对象数组的示例：

[ { "address": "0x06012c8cf97bead5deae237070f9587f8e7a266d", "type": "ERC721", "balance": "1610029", "decimals": 0, "name": "CryptoKitties" }, { "address": "0x06012c8cf97bead5deae237070f9587f8e7a266d", "type": "ERC721", "balance": "1717860", "decimals": 0, "name": "CryptoKitties" } ]

完整的错误信息：

错误：对象作为 React 子对象无效（找到：对象与键 {_hex，_isBigNumber}）。如果您打算渲染一组子项，请改用数组。

请让我知道我哪里出错了。谢谢。

Answer 1

在 reddit 上回答：https://www.reddit.com/r/reactjs/comments/mepg02/objects_are_not_valid_as_a_react_child_despite/

由于余额BigNumber是一个对象，所以不能直接渲染，需要转换成字符串或者数字。