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

Question

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

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

从概念上考虑，我挂载组件时调用的render方法，所以它不会在其中嵌入的变量中找到数据。但是我们有getInitialState。这似乎没问题，但如果嵌套对象正在渲染方法中使用怎么办。 getInitialState 中的状态只是空对象，因此对要成为子元素的引用是未定义的。

即使使用 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};
}

第二个解决方案 如果您希望数据在渲染之前准备好，您需要执行第一次 fetch outside ：

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

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

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