尝试从嵌套对象检索键/值后'TypeErroe: cannot read property NAME of undefined'

Question

我正在尝试在react-native中获取一些数据，其中将所述数据存储在state变量中，以便我可以在组件中的任何地方访问它们。这是代码：

export default class Result extends Component {
    state = {
        data: {}
    };
    async componentDidMount() {
        const that = this;
        const url = 'https://world.openfoodfacts.org/api/v0/product/8002270014901.json';
        let response = await fetch(url);
        if (response.status == 200) {
            let data = await response.json();
            this.setState({ data });
        }
    }
    ... some code ...
    render() {
      console.log(this.state.data.product);
    ...some more code ...
    }
}

我从另一台SOF文章中获得了componentDidMount的代码，以确保我可以使用一些data。当我尝试测试结果时，它可以与您在代码中看到的console.log完美效果。但是，如果我尝试在对象内更深入一层（例如console.log(this.state.data.product.brands);，我会收到主题中提到的错误消息。为什么？我如何确保在继续操作之前"加载"整个对象？>

Answer 1

在这种情况下，我想到的是，您正在执行render方法后收到响应。

您可以问，但是当我仅记录this.state.data.product时它是如何工作的？
好吧，当您初始化状态时，您将定义它具有data对象，因此在这种情况下，代码不会断开，因为this.state.data.product是undefined，但是当您尝试更深入地将一层更深入，您正在尝试访问属性undefined值，这会导致您遇到的错误（无法读取未定义的属性 x ）。

那么，我该怎么办才能解决？

您必须在州内存储一个布尔值变量，让我们称其为 fetchingData，并给它默认值为 true，所以现在您有

state = {
  data: {},
  fetchingData: true
};

然后，在您的render方法上，您验证它是否获取数据，或者如果您已经从服务器中有TE响应，则将其修改为这样：

render() {
  if(this.state.fetchingData) return <View><Text>Fetching data...</Text></View>
  console.log(this.state.data.product.brands);
  return(
    Whatever you want to do with the data...
  )
}

它的作用是在您仍在等待数据时，将显示一条Fetching data...消息，现在收到数据时，您还必须将fetchingData更改为false。

。

if (response.status == 200) {
  let data = await response.json();
  this.setState({
    data: data,
    fetchingData: false
  });
}