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。