无法读取空的属性

Question

我正在尝试从 API 访问一些数据，但当我这样做时，我得到 无法读取空的属性"5">

import React from "react";
function Card(props) {
console.log(props.data[5].mission_name); //why is it that this doesn't work in my machine?
console.log(props.data); //this works with my machine
return (
<div>
<h1>test</h1>
</div>
);
}
export default Card;

我最初将要传递的数据设置为 null，然后在加载来自 API 的数据后对其进行更新，所以我认为这可能是问题的一部分，但我不知道如何解决它。我为更多上下文制作了一个代码沙箱。作为参考，我正在使用spacex api。

https://codesandbox.io/embed/gallant-mcnulty-lyied?fontsize=14&hidenavigation=1&theme=dark

提前谢谢。

Answer 1

正如您所说，您最初将数据值设置为 null。当卡片最初呈现时，它将尝试在 null 上索引 5 并给出该错误。尝试类似的东西

if (props.data) { // the first render (where data is null) will skip this block
console.log(props.data[5].mission_name);
}

Answer 2

因为有时你的函数是在数据为空时调用的。

因此，在访问该数据的元素之前，您必须检查这一点：

console.log(props.data && props.data[5].mission_name);