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

两个相同的ajax调用不同的参数，第二个覆盖第一个，导致结果不一样，每次刷新它。第一个setState我已经设置了测试：[]，testsHistories：[]在第一个Ajax中，第二个测试集状态。为什么第二个Ajax调用会影响第一个？ReactJS两个相同的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'); 
     } 
    }); 
    }

来源

2017-06-12 user2235768

是否使用了赋值的'setState'？如果是这样，您将只能从一个查询中获得结果。要将结果“累加”为单个状态对象的属性，请使用[Object＃assign]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign） – Will

@DarrenSweeney为什么你会手动设置状态并放弃React自动处理状态更新？ – sbking

@sbking你是对的，我读错了，我以为他是从 –

你的代码也应该工作，setState不影响其他state值。

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

不要做API调用的和setState内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'); 
      } 
     }); 
    } 
}

来源

2017-06-12 17:41:27

设置相同的状态对象我不认为这是OP问题的答案，但正确的写作风格肯定 –

正确，不知道他为什么面对这个问题。谢谢:)更新了答案 –

由于Mayank舒克拉指出，AJAX调用通常在有生命周期方法调用。阅读更多在https://facebook.github.io/react/docs/state-and-lifecycle.html。至于为什么第二个AJAX调用会影响第一个AJAX调用，如果它们影响独立的状态片段（看起来如此），它们不应该互相影响，因为应该合并状态更新。但是，如果任何一个调用相互影响，我会建议使用回调或承诺来确保状态更新的顺序一致。

来源

2017-06-12 17:48:27

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

回答

相关问题