首页 文章

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

提问于
浏览 次
3

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

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

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

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

在最初的教程和简单的案例中，我发现React对我非常有用，但现在我无法有效地利用它 .

如何正确地反对这种行为并尽可能在最佳实践中？

reactjs

1 回答

  • 2

    第一个解决方案：我使用的方法只是检查渲染函数中是否存在状态

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

      : "" }
    return {result};
}

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

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

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

    要回答为什么componentWillMount不起作用：在componentWillMount中调用ajax调用将不起作用，因为它不会等待您的调用被提取，并且也可能发生循环并发 .

    回复于

相关问题