在setState()的回调中发出AJAX请求

Question

我一直在编写我的ReactJS AJAX请求,如下所示:

this.setState({
    isLoading: true,
    results: null
});
$.get(ajaxUrl, function(results) {
    this.setState({
        isLoading: false,
        results: results
    });
}.bind(this));

这只是一个例子,它缺乏错误处理,限制,取消请求等.但要点就在那里.我基本上要求设置一些状态,然后发出请求.

不过,看看GitHub上的其他一些代码,我注意到有些人在setState回调中编写了他们的AJAX调用:

this.setState({
    isLoading: true,
    results: null
}, function() {
    $.get(ajaxUrl, function(results) {
        this.setState({
            isLoading: false,
            results: results
        });
    }.bind(this));
}.bind(this));

这样做是否有正当理由？文档说:

无法保证对setState的调用进行同步操作,并且可以对调用进行批处理以获得性能提升.

因此无法保证setState在返回之前改变状态,但我没有提到不同的setState可能无序执行.所以最糟糕的情况是"加载"状态永远不会被渲染.这是后一种风格试图解决的问题吗？还有其他风险我看不到吗？

Answer 1

\n

但我没有看到任何提及不同的 setState 可能会乱序执行

\n

\n\n

正确的是，它们是按顺序运行的，从用户体验的角度来看，您不希望显示加载指示器少于半秒。

\n\n

需要这个的情况看起来更像是这样的：

\n\n

this.setState({\n    isLoading: true,\n    results: this.state.results || []\n}, function() {\n    $.get(ajaxUrl, function(results) {\n        this.setState({\n            isLoading: false,\n            // note! we\'re referring to state here\n            results: this.state.results.concat(results)\n        });\n    }.bind(this));\n}.bind(this));\n

\n\n

但是，也可以通过将回调传递给 setState 而不是对象来解决这个问题。这样，我们就可以在发生任何先前排队的更新后查看状态。

\n\n

\n

也可以传递带有签名 function(state, props) 的函数。在某些情况下，当您想要将原子更新排入队列并在设置任何值之前查阅 state+props 的先前值时，这可能很有用。
\n \xe2\x80\x93组件 Api 文档

\n

\n\n

this.setState({\n    isLoading: true,\n    results: null\n});\n$.get(ajaxUrl, function(results) {\n    this.setState(function(state){\n        return {\n            isLoading: false,\n            results: state.results.concat(results)\n        };\n    });\n}.bind(this));\n

\n\n\n\n

为了获得最佳结果，请将所有这些抽象为高阶组件或 mixin。您不想在每个获取数据的组件中处理此逻辑。

\n