React.js - 無法訪問對象數組中元素的值

Question

我覺得自己是一個糟糕的開發人員，帶着這個問題來找你，但我在兜圈子。

我正在使用 React/JS，這是問題所在：

該代碼通過 ajax (axios)從我的個人 API 導入了一組對象。
我的狀態需要一個數組： const [ films, setFilms ] = useState([]); 並收到一個。

實際上，來自我的 API 的response.result是一個包含 20 個電影對象的數組：

我只是想將它作為道具傳遞給另一個組件，在該組件中我將使用存儲在數組中的對象之一來使用和顯示其值，但我一直無法這樣做......到目前為止。

現在，在 React 中，當我測試像這樣調用一部電影時：
console.log("films", films); => WORKS （顯示上面的屏幕截圖） ，
console.log("film", films[0]); => WORKS （顯示第一個元素，一個對象） ，

但是，如果我嘗試輸入它（任何屬性） ：
console.log("film", films[0].id); 或console.log("film", films[0]["id"]);
=>失敗：類型錯誤：電影 [0] 未定義！

我知道我錯過了一些東西。 我收到一個對象數組，可以輸入一個元素但無法讀取其屬性...

我感到迷茫...幫助？ :)
謝謝

Answer 1

嘗試像這樣使用&&運算符：

console.log("film", films[0] && films[0].id);

Answer 2

可能是你的console.log("films", films); 即使電影尚未加載，方法也會被調用幾次。 當您嘗試記錄電影時，它首先會記錄 null 或空數組，但隨后會顯示正確的列表。 另一方面，當你有console.log("film", films[0].id); ，您的應用程序將崩潰，因為它是在電影數組為 null 或為空時調用的。

所以在記錄之前請確保您的膠片陣列長度大於 0。