在setState（）的回调中发出AJAX请求

我一直在编写我的ReactJS AJAX请求，如下所示：

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

this.setState({
    isLoading: true,
    results: this.state.results || []
}, function() {
    $.get(ajaxUrl, function(results) {
        this.setState({
            isLoading: false,
            // note! we're referring to state here
            results: this.state.results.concat(results)
        });
    }.bind(this));
}.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可能会无序执行。因此，最糟糕的情况是“加载”状态永远不会被渲染。这就是后一种风格试图解决的问题吗？还有其他我看不到的风险吗

但我看不到有人提到不同的设置状态可能会执行不正常

请更正，它们是按顺序运行的，从用户体验的角度来看，您不希望在半秒钟内显示加载指示器

需要这样做的情况更像这样：

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

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

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

还可以通过签名函数（state、props）传递函数。在某些情况下，当您希望将原子更新排入队列时，这可能非常有用，该更新在设置任何值之前会参考state+props的先前值。
–

---

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