錯誤：對象作為 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。

也許有一天它會幫助某人:)