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完成。您的应用程序的生命周期如下所示

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

React：无法访问状态中数组的索引（索引未定义）

1 个答案: