reactjs - 无法读取 null 的属性 '_currentElement'

Question

我正在做react-rails应用程序。我收到这个奇怪的错误。看来是react本身的问题。这是我收到此错误的上下文:

var ChronicBox = React.createClass({

    getInitialState: function(){
      return {chronics: []}
    },
    componentWillMount: function(){
      $.ajax({
     // some ajax call that setsState of chronicles
      });
    },
    render: function(){
        return(
            <div className="chronics">
                <ChronicsList chronics={this.state.chronics.chronicsList} />
            </div>
        )
    }
});

我的 ChronicsList 看起来像:

var ChronicsList = React.createClass({
    render:function(){
        console.log(this.props.chronics);
        var chronics = this.props.chronics.map(function(chronic){
            return(
                <Chronic name={chronic.name}/>
            )
        });

        return(
            <ul>
                {chronics}
            </ul>
        )
    }
});

从日志中我看到这个:

undefined
can not read property .map of undefined
Cannot read property '_currentElement' of null

从这些我看到，最初的状态 Chronics 为空，因此 .map 无法使用。然后，当ajax调用setsState时，我的ChronicBox重新渲染，并且chronics包含json信息，如下所示:

{
    "chronicsList": [{
        "id": 1,
        "name": "some allergy",
        "patient_id": 2,
        "created_at": "2016-02-11T19:05:33.434Z",
        "updated_at": "2016-02-11T19:05:33.434Z"
    }, {
        "id": 2,
        "name": "one more allergy",
        "patient_id": 2,
        "created_at": "2016-02-11T19:06:04.384Z",
        "updated_at": "2016-02-11T19:06:04.384Z"
    }],
}

现在慢性病是在 ChronicForm 中定义的。但我没有在 ChronicForm 中看到 props.chronics 的那些日志，而是收到错误:

Cannot read property '_currentElement' of null

有什么办法可以解决这个问题吗？我看到这是 react 中的一个问题，但它已关闭。

Answer 1

正如您所指出的，this.props.chronics 为 null，因此 map 无法工作。因此，React 无法渲染您的组件。当数据重新加载并且 chronics 是一个数组时，react 这次能够成功调用 render 方法；但是当它尝试将当前虚拟 DOM 树与前一个虚拟 DOM 树进行比较时，它会失败，因为它无法找到前一个 DOM 树。

解决方案是在初始加载时传递一个数组。因此，您必须将根组件的初始状态设置为:

getInitialState: function(){
  return {
    chronics: {
      chronicsList: []
    }
  }
},