Question

第一次使用ReactJS用户并且遇到问题循环我通过AJAX检索的数据来填充。我收到的错误数量来自Uncaught TypeError: Cannot read property 'map' of undefined。我应该设置道具还是国家？

var Posts = React.createClass({
getInitialState: function() {
     return ({
        posts: []
     })
},

loadPosts: function(){
    var posts = null;
    axios.get('/getposts')
      .then(function (result) { 
        posts = result.data;    
      })
      .catch(function (error) {
        console.log(error);
      });
},

postReadMode: function() {
    return (
        <div>
        </div>
    )
},

render: function() {
    return (
        <div>
            Hello, {this.props.posts.map(function(item, i){
                return item.title;
            })}
        </div>
    )
}

}）

返回的数据有点像多维对象/数组：

Obj:
  0: 
     title: 'Title 1',
     date: '12-2-2015',
     content: 'asdf'
  1: 
     title: 'Title 2',
     date: '1-25-2016',
     content: 'asdfasdf'

Answer 1

我们需要清除2点：

使用{this.props.posts.map(..)不正确。 posts（在本例中）是state，因为在AJAX请求之后，其值已更改（从[]更改为AJAX response。您必须在{this.state.posts.map(...)方法中使用render。
您应该在componentDidMount方法中实现AJAX调用：

如果您需要从远程端点加载数据，这是一个好地方实例化网络请求。

componentDidMount: function() {
    var self = this;
    axios.get('/getposts')
        .then(function (result) { 
            self.setState({
                posts: result.data
            });
        })
        .catch(function (error) {
            console.log(error);
        });
}

设置setState方法会更改posts状态值，因此render方法将再次运行以显示新的用户界面。

如果您想要更好的方法来处理异步网络内容，请尝试Redux AsyncActions。

ReactJS - 使用map循环遍历数据数组道具

1 个答案: