React.js - 无法读取未定义

Question

当组件安装时，我正在发出一个返回带有对象数组的Object的ajax请求。

getPages() {
  getAllPagesData().then((pages) => {
    let data = pages
    this.setState({ pages });
  });
}

在这个功能中，我可以有效地访问数据。

console.log(pages.pages[0].description)

打印正确的页面描述。

在渲染中，我将状态设置为要在我的返回中访问的变量：

render() {

  const pages = this.state.pages.pages
  console.log(pages)

return (

chrome中的console.log是：

(55) [Object, Object, Object, Object,...

然后我尝试使用map迭代数组：

return (
  <div>
    <Nav />
     { pages.map((post, index) => (

它打破了页面，错误是：Cannot read property 'map' of undefined at Pages.render

我尝试了很多不同的方法来访问这个对象及其内部的数组，但是无法在渲染函数中显示单个数组项。

Answer 1

尝试在渲染方法中使用此行

const pages = this.state.pages.pages || [ ]

很可能是因为在ajax请求完成之前调用了render方法。所以this.state.pages.pages最初是undefined。