Javascript TypeError:无法读取属性'；标题'；用于反应的未定义的

我试图从应用程序组件中的我的状态访问一个数组，但我不知道为什么它不工作

从“React”导入React；
导入“/App.css”；
//从“/components/Category”导入类别；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
类别：[]，
};
}
componentDidMount（）{
//const addon=Math.floor（Math.random（）*1000）；
取回（“http://jservice.io/api/categories?count=5")
.then（（response）=>response.json（））
。然后（（数据）=>{
var-arr=[]；
用于（数据中的var x）{
console.log（arr.push（数据[x]）；
console.log（数据[x]）；
}
这是我的国家({
类别：arr，
});
});
}
render（）{
返回{this.state.categories[0].title}；
}
}
导出默认应用程序当应用程序第一次加载时，它还没有来自API的内容，因此您试图访问空数组的第一个元素。因此，即使API调用很快，也总会有一种状态，在这种状态下，
categories
数组将为空。因此，在
render
方法中，需要检查数组是否有一些值

render() {
    if (this.state.categories.length === 0) {
        return <div>No categories</div>
    }
    return <div>{this.state.categories[0].title}</div>;
  }

render（）{
if（this.state.categories.length==0）{
不返回任何类别
}
返回{this.state.categories[0].title}；
}
当应用程序第一次加载时，它还没有API中的内容，因此您试图访问空数组的第一个元素。因此，即使API调用很快，也总会有一种状态，在这种状态下，
categories
数组将为空。因此，在
render
方法中，需要检查数组是否有一些值

render() {
    if (this.state.categories.length === 0) {
        return <div>No categories</div>
    }
    return <div>{this.state.categories[0].title}</div>;
  }

render（）{
if（this.state.categories.length==0）{
不返回任何类别
}
返回{this.state.categories[0].title}；
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
类别：[]，
};
}
componentDidMount（）{
//const addon=Math.floor（Math.random（）*1000）；
取回（“http://jservice.io/api/categories?count=5")
.then（（response）=>response.json（））
。然后（（数据）=>{
设arr=Object.assign（[]，this.state.categories）；
arr=数据；
//您正在获取的“数据”位于一个数组中。
这是我的国家({
类别：arr，
});
});
}
render（）{
返回{this.state.categories&&this.state.categories[0]&&this.state.categories[0].title}；
}
}
导出默认应用程序；

组件渲染时，此时处于状态的类别数组为空。它试图在一个空数组中找到
title
键。这就是它抛出错误的原因。
确保检查条件
class App extends React.Component{
构造函数（）{
超级（）；
此.state={
类别：[]，
};
}
componentDidMount（）{
//const addon=Math.floor（Math.random（）*1000）；
取回（“http://jservice.io/api/categories?count=5")
.then（（response）=>response.json（））
。然后（（数据）=>{
设arr=Object.assign（[]，this.state.categories）；
arr=数据；
//您正在获取的“数据”位于一个数组中。
这是我的国家({
类别：arr，
});
});
}
render（）{
返回{this.state.categories&&this.state.categories[0]&&this.state.categories[0].title}；
}
}
导出默认应用程序；

组件渲染时，此时处于状态的类别数组为空。它试图在一个空数组中找到
title
键。这就是它抛出错误的原因。
当您在此处进行网络调用并获取数据时，请确保检查条件（异步调用）。因此，React生命周期从componentDidMount（）->render（）开始，因此与此同时，
this.state.categories
的长度将为0，因为您使用空数组初始化它

为了避免这种错误，最好使用条件渲染，比如如果数组不是空的，那么只渲染所需的标题

 render() {
  return {this.state.categories.length>0 ? <div>{this.state.categories[0].title}</div> : null};
}

render（）{
返回{this.state.categories.length>0？{this.state.categories[0].title}:null}；
}
当您在此处进行网络调用并获取数据时，这将是一个副作用（异步调用）。因此，React生命周期从componentDidMount（）->render（）开始，因此与此同时，
this.state.categories
的长度将为0，因为您使用空数组初始化它

为了避免这种错误，最好使用条件渲染，比如如果数组不是空的，那么只渲染所需的标题

 render() {
  return {this.state.categories.length>0 ? <div>{this.state.categories[0].title}</div> : null};
}

render（）{
返回{this.state.categories.length>0？{this.state.categories[0].title}:null}；
}
componentDidMount（）发生在render（）之前否？编辑：刚刚试过，效果不错！非常感谢你！是的，但是获取是异步的，并且总是需要更多的时间（考虑网络速度慢，甚至请求失败）componentDidMount（）发生在render（）之前否？编辑：刚刚试过，效果不错！非常感谢你！是的，但是获取是异步的，并且总是需要更多的时间（考虑网络速度慢，甚至失败的请求）