Question

我目前正在尝试学习ReactJS并且无法找到任何一致的文档（甚至官方文档看起来有些混乱），特别是围绕AJAX，它似乎有点拼凑在一起。我最终使用了JQuery $ .get方法，这看起来有点像作弊。

我有下面的代码，但只是想知道是否有更简洁的方法处理简单的AJAX调用？我也在componentDidMount中解决这个问题，这看起来是最符合逻辑的，关注生命周期。

欢迎任何帮助!!

getInitialState: function () {
    return {
        numberOfItems: 0,
        items: []
    };
},

componentDidMount: function () {

    $('#MyContainer .loading').show();

    $.get(this.props.source, function (result) {
            var response = result.response;
            this.setState({
                numberOfItems: response.list.numberOfItems,
                items: response.list
            });
        }.bind(this))
        .done(function () {
            $('#MyContainer.loading').hide();
        });
},

render: function() {
    return(
        //Stuff here
    )
};


ReactDOM.render(
    <RecommendationsList source="/my/api/call/here"/>,
    document.getElementById('MyContainer')
);

Answer 1

React只是视图层。它并不涉及获取数据，而是由您自己决定。我使用jQuery的AJAX功能易于使用，但你可以真正使用你想要的任何AJAX library。

根据您提供的代码，您正在做的一切都是正确的。您正在等待组件装载componentDidMount。

关于保持异步JavaScript干净，有多个回调的说明;我会将调用分配给变量。

var request = $.get(this.props.source, function (result) {
    var response = result.response;
    this.setState({
        numberOfItems: response.list.numberOfItems,
        items: response.list
    });
}.bind(this));

然后将侦听器绑定到该变量。

request.done(function () {
    $('#MyContainer.loading').hide();
});

Answer 2

使用反应状态

如果您使用正常的反应状态来处理您的数据（我建议不要这样做），那么您的方法很好。吻（保持简单和愚蠢）。

Make AJAX call --> In success callback, update state

使用Redux

您正在寻找Redux Thunk模块。它允许您以异步方式分派操作。

Redux操作应该是同步的。但是我们可以使用名为middlewares的强大redux功能来实现异步操作。因此，我们的想法是创建一个动作创建器，它可以返回一个动作并在promise上发送。

详细了解redux文档中的middlewares。

ReactJS AJAX最佳实践

2 个答案:

使用反应状态

使用Redux