ReactJS-消除渲染方法中引用状态子元素时的未定义错误

Question

我有一个组件的层次结构。应用程序状态位于公共所有者最上面的组件中。我用空对象或GetInitialState中的数组设置初始状态。我通过ajax获取数据，调用该组件的ComponentDidMount中这个状态所有者最上面的组件的方法。但是，无论是在这个组件中使用ajax调用的success回调中的状态集，还是在子组件中使用状态集，通过props将状态传递给它们，我几乎总是会遇到变量找不到或一些未定义的错误。

从概念上考虑，当我挂载组件时会调用render方法，所以它不会在嵌入其中的变量中找到数据。但是我们有getInitialState。这似乎还可以，但如果在呈现方法中使用了嵌套对象，该怎么办呢？getInitialState中的状态只是空对象，因此未定义对to be子元素的引用。

即使使用componentWillMount也不起作用。唯一的方法似乎是拥有初始状态，而不是在呈现中引用任何未定义的子元素。然而，在大多数情况下，这似乎是必要的。我认为与这种必要性相关的问题实际上是一种反模式。

在最初的教程和简单的案例中，我发现React对我非常有用，但现在我不能有效地使用它。

如何正确地以最佳的实践来对抗这种行为？

Answer 1

第一个解决方案：我使用的方法是简单地检查呈现函数中的状态是否存在

render: function() {
    var result = { this.state.field ?
        this.state.field.embeddedfield ?
            <div> this.state.field.embeddedfield </div>
        : <div> Data are loading! </div>

      : "" }
    return {result};
}

第二个解决方案如果希望数据在呈现之前准备就绪，则需要在外部执行第一次提取：

  $.ajax({...}).success(function(res) {
         <MyView data={res} /> // render your function on success
    });

参见this：bind（this）不工作于ajax成功函数