小编ast*_*ern的帖子

这是有问题的组件.

const UserList = React.createClass({
  render: function(){
    let theList;
    if(this.props.data){
      theList=this.props.data.map(function(user, pos){
        return (
          <div className="row user">
            <div className="col-xs-1">{pos}</div>
            <div className="col-xs-5">{user.username}</div>
            <div className="col-xs-3">{user.recent}</div>
            <div className="col-xs-3">{user.alltime}</div>
          </div>
        );
      }, this);
    } else {
     theList = <div>I don't know anymore</div>;
    }
    console.log(theList);
    return (
      theList
    );
  }
});

每当我尝试返回{theList}时,我都会收到一个无法读取属性'__reactInternalInstance $ mincana79xce0t6kk1s5g66r'的null错误.但是,如果我用静态html替换{theList},console.log将打印出我想要的正确对象数组.根据答案,我试图返回{theList}和List,但这没有帮助.

在这两种情况下,console.log首先打印出[],我假设是因为componentDidMount包含我的ajax调用以从服务器获取json并且在第一次render()之前尚未触发.我试图检查this.props.data为null但它没有帮助.

如果有帮助,这是父组件:

const Leaderboard = React.createClass({
  getInitialState: function(){
    return ({data: [], mode: 0});
  },
  componentDidMount: function(){
    $.ajax({
      url: 'https://someurlthatreturnsjson',
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this), …