React.js-无法访问对象数组中的元素值

Question

这个问题让我觉得很糟糕，但是我正在兜圈子。

我正在使用React / JS，这是问题所在：

代码通过ajax （axios）从我的个人API导入对象数组。
我的状态期望一个数组：const [ films, setFilms ] = useState([]);并收到一个。

实际上，我的API中的 response.result 是一个由20个电影对象组成的数组：

我只想将其作为道具传递给另一个组件，在该组件中，我将使用数组中的一个存储的对象来使用和显示其值，但我一直无法做到目前为止...

现在，在React中，当我测试要像这样看一部电影时：
console.log("films", films); => 作品 （上面显示了屏幕截图），
console.log("film", films[0]); => 作品 （显示第一个元素，一个对象），

但是，如果我尝试输入（任何属性）：
console.log("film", films[0].id);或console.log("film", films[0]["id"]);
=> 失败：TypeError：电影[0]未定义！

我知道我想念一些东西。我收到一个对象数组，可以输入一个元素，但是不能读取其属性...

我感到迷茫...帮助吗？ :)
谢谢

Answer 1

尝试使用 && 运算符，如下所示：

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

Answer 2

您的console.log("films", films);方法可能被两次调用，即使尚未加载电影也是如此。当您尝试记录影片时，它将首先记录null或一个空数组，但随后将显示正确的列表。另一方面，当您拥有console.log("film", films[0].id);时，您的应用将崩溃，因为在films数组为null或为空时调用了该应用。

因此，在记录之前，请确保您的胶片阵列长度大于0。