Question

两个相同的ajax调用不同的参数，第二个是覆盖第一个，导致结果不同，每次刷新它。 setState在第一个我已设置测试：[]，testsHistories：[]在第一个ajax，第二个设置状态为测试。为什么第二个ajax调用影响第一个？

class App extends Component {
  constructor(props){
    super(props);
     this.onFormSubmit = this.onFormSubmit.bind(this);
     this.state = { tests: [],
       testsHistories: [], testInfo: []}; 

   $.ajax({
      url: "http://localhost:xxxx/api/Testing?sorton=datecompleted&order=asc",
      success: (data) => {
         console.log("success");
         this.setState({tests: data, testsHistories: data}
                      );
        },
        error: function(xhr,status,err){
          console.log('error');
        }
    });

    $.ajax({
       url: "http://localhost:xxxx/api/Testing?"+ admissionId,
     // url: "http://localhost:xxxx/api/Testing?admissionId=5",
      success: (data) => {
         console.log("success");
         this.setState({testInfo: data});
        },
        error: function(xhr,status,err){
          console.log('error');
        }
    });
  }

Answer 1

您的代码也应该有效，setState不会影响其他state值。

建议和编写相同代码的另一种方式：

不要在setState内进行api调用和constructor，constructor用于初始化不更新的变量。

使用componentDidMount生命周期方法并在其中执行api调用。

根据DOC：

componentDidMount（）在组件出现后立即调用安装。需要DOM节点的初始化应该放在这里。如果你需要从远程端点加载数据，这是一个好地方实例化网络请求。在这种方法中设置状态会触发重新渲染。

像这样写：

class App extends Component {
    constructor(props){
      super(props);
      this.onFormSubmit = this.onFormSubmit.bind(this);
      this.state = { 
          tests: [],
          testsHistories: [], 
          testInfo: []
      };
    } 

    componentDidMount(){
        $.ajax({
            url: "http://localhost:xxxx/api/Testing?sorton=datecompleted&order=asc",
            success: (data) => {
              this.setState({tests: data, testsHistories: data});
            },
            error: function(xhr,status,err){
              console.log('error');
            }
        });

        $.ajax({
            url: "http://localhost:xxxx/api/Testing?"+ admissionId,
            success: (data) => {
               this.setState({testInfo: data});
            },
            error: function(xhr,status,err){
              console.log('error');
            }
        });
    }
}

Answer 2

正如Mayank Shukla所指出的，AJAX调用通常在生命周期方法中被调用。阅读更多https://facebook.github.io/react/docs/state-and-lifecycle.html。

至于为什么第二个AJAX调用影响第一个，如果它们影响独立的状态（看起来如此），它们不应该相互影响，因为状态更新应该合并。但是，如果任一呼叫相互影响，我建议使用回调或承诺来确保状态更新的顺序是一致的。

ReactJS两个相同的ajax调用具有不同的参数

2 个答案: