Reactjs-在渲染方法中引用状态子元素时应对未定义的错误

Question

我在以特定方式使用 React 时经常遇到问题。

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

从概念上思考，当我安装组件时调用渲染方法，因此它不会在嵌入其中的变量中找到数据。但我们有 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
    });

看这个:bind(this) not working on ajax success function

要回答为什么 componentWillMount 不起作用:将 ajax 调用放入 componentWillMount 中将不起作用，因为它不会等待您的调用被获取，并且还可能发生循环并发。