Error: Objects are not valid as a React child (within Promise.all)

Question

我正在创建 React 实践项目，但我仍在处理这种类型的错误（对象作为 React 子对象无效）。更多内容见下方截图。

Thrown error

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

一些解释：这段代码是useEffect中的一部分（这个useEffect仅当 fixturesIds 未定义时才执行内容）。然后一些 get 请求被推送 到一个数组 predictionList 中，它们在 Promise.all 中一起解析。 Promise.all returns 一个数组，我将其映射以获取所需数据。这全部(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 为真），

所以它没有显示预测组件而是显示错误。

知道为什么会抛出该错误吗？我研究了很多，但我仍然无法弄清楚。

谢谢！

Answer 1

嗯，我刚刚弄明白了。

问题是在 JSX 语法中无法将对象用作 props。

我在控制台中记录了我所有的道具，发现我的一个道具真的是一个物体。

解决方法很明确，在一个对象里面选择右边属性即可。如果有复杂的 API 嵌套对象，很容易忽略你实际上是在 prop.

中返回一个对象

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

Error: Objects are not valid as a React child (within Promise.all)

Error: Objects are not valid as a React child (within Promise.all)

javascript

promise

reactjs

axios

use-effect