Question

我正在尝试从API访问一些数据，但是当我收到时，我无法读取null的属性“ 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。当Card最初呈现时，它将尝试为空索引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);

无法读取null的属性''

2 个答案: