javascript - react : Cannot access index of an array in a state (index undefined)

Question

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

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>  

    );

}

谢谢

Answer 1

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

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

Example

此外，您还使用 componentWillMount(在 render 之前触发)进行 AJAX 调用，但此方法不会等待 ajax 完成。您的应用程序的生命周期如下所示

1. 调用componentWillMount
2. 调用渲染
3. ajax已完成
4. 设置新状态
5. 使用新状态调用render