错误：对象作为 React 子级无效（在 Promise.all 中）答案

【问题标题】：Error: Objects are not valid as a React child (within Promise.all)错误：对象作为 React 子级无效（在 Promise.all 中）
【发布时间】：2021-08-13 12:44:12
【问题描述】：

我正在创建 React 实践项目，但我仍在处理这种错误（对象作为 React 子对象无效）。更多在下面的屏幕截图中。

Thrown error

您也可以在该屏幕截图中看到代码的问题部分。

一些解释：这段代码是useEffect中的一部分（只有在fixturesIds不是未定义的情况下才会执行这个useEffect内容)。然后一些 get 请求被推送 到数组 predictionList 中，并在 Promise.all 中一起解析。 Promise.all 返回一个数组，我将其映射以获取所需的数据。这一切 (prediction.value.data) 被设置为一个状态 (setFixturesDetails)。

Prediction.value.data 看起来像：[{..}, {..}, {..}, {..}]

当我将它登录到控制台时，它运行得非常好。

但是当我尝试在组件中使用这个对象数组作为道具时（见下文）...

return (
    <div className='App'>
      {fixturesDetails.length > 0 ? (
        fixturesDetails.map((details) => (
          <Prediction
            homeTeam={details.teams.home.name}
            awayTeam={details.teams.away.name}
            winner={details.predictions.winner}
          />
        ))
      ) : (
        <h2>Loading</h2>
      )}
    </div>

...它已经开始抛出一个提到的错误。

加载中出现正常并且崩溃当设置fixturesDetails（fixturesDetails.length > 0 为真） ,

所以不是显示预测组件，而是显示错误。

任何想法为什么会引发该错误？我研究了很多，但我仍然无法弄清楚。

谢谢！

【问题讨论】：

当您在控制台登录fixturesDetails.map((details) => (<Component/>)) 时会得到什么。您能否也显示您的预测组件代码
听起来是Prediction 组件的实现存在问题

标签： javascript reactjs promise axios use-effect

【解决方案1】：

嗯，我刚刚想通了。

问题是在 JSX 语法中不能使用 object 作为 props。

我在控制台中记录了我所有的道具，发现我的一个道具确实是一个对象。

解决方案很清楚，只需在对象内选择正确的属性即可。如果有嵌套对象的复杂 API，很容易忽略您实际上是在 prop 中返回一个对象。

也许有一天它会对某人有所帮助:)

【讨论】：