错误：对象作为 React 子对象无效（在 Promise.all 内）

Question

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

抛出的错误

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

一些解释：这段代码是useEffect中的一部分（只有在未定义fixturesIds时才会执行此 useEffect 内容） 。 然后一些get 请求被推送到数组predictionList中，并在Promise.all中一起解析。 Promise.all 返回一个数组，我用 map 获取所需的数据。 这一切（ prediction.value.data ）设置为 state （ 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>

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

加载正常出现，并在设置fixturesDetails 时崩溃（ fixturesDetails.length > 0 为真），

因此，它没有显示预测组件，而是显示了该错误。

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

谢谢！

Answer 1

好吧，我刚刚想通了。

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

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

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

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