反应：无法访问处于状态的数组的索引（索引未定义）答案

【问题标题】：React: Cannot access index of an array in a state (index undefined)反应：无法访问处于状态的数组的索引（索引未定义）
【发布时间】：2016-07-06 23:16:00
【问题描述】：

我的组件中有一个数组作为状态属性，如下所示：

this.state = { postData: [{id: 1, author: 'Mary'}, {id:2, author: 'John'}] }

当我通过console.log访问它时，例如this.state.postData[0]，它显示了对象的内容并且工作正常

但是当我尝试将它作为元素的内容输出时，这样：

<p>{this.state.postData[0].author}</p>

它说this.state.postData[0] 是未定义的。到目前为止我还没有弄清楚为什么会发生这种情况，是否有一些特殊的方法可以访问 React 中的数组？

编辑：附加信息和背景

状态的初始化：

constructor() {

    super();

    this.state = { postData: '', end : '' };

    this.loadPosts = this.loadPosts.bind(this);

}

我正在加载数据，使用AJAX，jQuery，这是包含帖子信息的数组结构：（index.js）

app.get('/requestPost/12', (req, res) => {
    var jsonPosts = { posts: [ {id:1, author: 'Mary', content: 'Hello, I am Mary'} ] };
    res.send(jsonPosts);
});

然后它被接收并且postData 状态现在包含posts 数组。

loadPosts() {

    $.get('/requestPost/12').success( (data) => {

        this.setState({postData : data.posts });

    });

}

componentWillMount() {

    this.loadPosts();

}

渲染功能。我注意到当我在控制台中显示this.state.postData[0] 而不尝试将其作为元素输出时，它可以工作。但是，当我尝试将其用作输出时，如<p>{this.state.postData[0].author}</p>，它也停止在控制台中工作。此外，当我尝试在控制台中显示 postData 的属性时，它不起作用，例如 console.log(this.state.postData[0].author)

render() {

    console.log(this.state.postData[0]);

    return (

    <div>
        <h1>This is the blog we all like</h1>
        <p>{this.state.postData[0].id}</p>
        <p>{this.state.postData[0].author}</p>
        <p>{this.state.postData[0].content}</p>
        <hr/>
    </div>  

    );

}

谢谢

【问题讨论】：

标签： javascript arrays node.js reactjs

【解决方案1】：

你应该改变初始状态。你需要将postData设置为空Array，第一个元素为Object，因为你试图从postData获取第一个元素但得到undefined( this.state.postData[0] 返回 undefined) 因为它是空的 String 没有/不能有 Object 作为第一个元素

this.state = { 
  postData: [{ }], 
  end : '' 
};

Example

另外，您正在使用 componentWillMount（在 render 之前触发）与 AJAX 调用，但此方法不会等待，而 ajax 将完成。您的应用程序的生命周期如下所示

致电componentWillMount
致电render
ajax 已完成
设置新状态
用新状态调用render

【讨论】：