Question

让一个react.js组件在 componentDidMount 方法中进行三次ajax调用，并根据每次调用的结果设置状态。当我“链接”调用以便它们按特定顺序执行时，标题中出现错误。如果我在没有链接的情况下执行此操作则没有错误，但这不起作用100％，因为无法保证A在B和B将在C之前完成之前完成。

为什么反应抱怨Root元素ID？

componentDidMount() {
    var self = this;

    // this doesn't produce the error but is not acceptable
    $.ajax({.. A ..}).done(function(result) { self.setState({a: result}); });
    $.ajax({.. B ..}).done(function(result) { self.setState({b: result}); });
    $.ajax({.. C ..}).done(function(result) { self.setState({c: result}); });

    // chaining doesn't work
    //self.getA();
    // Root element ID differed from reactRootID
}

getA() {
    var self = this;
    $.ajax({...})
        .done(function(result) { self.setState({a: result}); self.getB(); });
}

getB() {
    var self = this;
    $.ajax({...})
        .done(function(result) { self.setState({b: result}); self.getC(); });
}

getC() {
    var self = this;
    $.ajax({...})
        .done(function(result) { self.setState({c: result}); });
}

Answer 1

可能是因为react不喜欢在componentDidMount中链接多个setState（）。

更好的设置：

从componentDidMount调用getA。
包括gotTo：州内的'A'
在componentDidUpdate中：调用getB（如果this.state.gotTo =='A'），否则调用getC

根元素ID与reactRootID不同

1 个答案: