尝试访问数组后，React组件返回无法读取null的属性'__reactInternalInstance $

Question

这是有问题的组件。

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’的

错误。但是，如果我用静态html替换{theList}，console.log将打印出我想要的正确对象数组。根据答案，我尝试同时返回{theList}和TheList，但这没有帮助。

在这两种情况下，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),
      error: function(xhr, status, err) {
        console.error('https://someurlthatreturnsjson', status, err.toString());
      }.bind(this)
    });
  },
  render: function(){
    return (
      <div className="leaderboard">
        <div className="row titleBar">
          <img src="http://someimage.jpg"></img>Leaderboard
        </div> 
        <HeaderBar />
        <UserList data={this.state.data}/>
      </div>
    );
  }
});

Answer 1

好的，这里存在一些有趣的问题，但是您是 如此亲密
。具有react的大对象必须始终返回单个顶级元素（例如div）。因此，您的变量theList实际上是一个div数组。您不能直接退货。但是，如果将其包装在单个父div中，则可以将其返回。

const mockData = [

    {

    username: 'bob',

    recent: 'seven',

    alltime: 123,

  },

    {

    username: 'sally mae',

    recent: 'seven',

    alltime: 133999,

  },

];



var $ = {

    ajax(opt) {

    setTimeout(() => {

        opt.success(mockData);

    }, 200);

  }

}



const UserList = React.createClass({

  render: function(){

    let theList;

    if (this.props.data && this.props.data.length) {

      theList = this.props.data.map(function(user, pos){

        return (

          <div key={user.username} className="row user">

            <div className="col">{pos}</div>

            <div className="col">{user.username}</div>

            <div className="col">{user.recent}</div>

            <div className="col">{user.alltime}</div>

          </div>

        );

      });

    } else {

      theList = <div>There is NO data</div>;

    }



    return <div>{theList}</div>;

  }

});



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),

      error: function(xhr, status, err) {

        console.error('https://someurlthatreturnsjson', status, err.toString());

      }.bind(this)

    });

  },

  render: function(){

    return (

      <div className="leaderboard">

        <UserList data={this.state.data}/>

      </div>

    );

  }

});



ReactDOM.render(

  <Leaderboard/>,

  document.getElementById('container')

);


.col {

  width: 200px;

  float: left;

}


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>



<div id="container">

  <!-- This element's contents will be replaced with your component. -->

</div>

解释一点小提琴。不用担心看起来var $很奇怪的东西，我只是使用jQuery的ajax方法，这样我可以在200ms之后返回一些假数据。

另外，对我来说，jsfiddle在运行它时会给我一个“错误的配置”消息，但是我关闭了消息，结果就在那里。不知道那是什么。