ReactJS zwei gleiche Ajax-Aufrufe mit unterschiedlichen Parameter

Question

zwei gleiche Ajax-Aufrufe mit unterschiedlichen Parametern, die zweite überschreibt zuerst, was Ergebnis unterschiedlich sein, jedes Mal, wenn ich es aktualisieren. setState in der ersten Ich habe Tests gesetzt: [], testersHistories: [] in der ersten Ajax, zweite einen gesetzten Zustand für Tests. Warum wirkt sich der zweite Ajax-Anruf auf den ersten aus?

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

Der Code sollte auch funktionieren, setState wirken sich nicht auf die anderen state Werte.

Vorschläge und eine andere Art und Weise den gleichen Code zu schreiben:

Sie die api Ruf des und setState innerhalb constructor nicht tun, constructor verwendet wird, um die Variablen zu initialisieren, nicht zu aktualisieren.

Verwenden Sie componentDidMount Lifecycle-Methode und die API-Aufrufe innerhalb dieser.

Wie pro DOC:

componentDidMount() aufgerufen wird, unmittelbar nachdem ein Bauteil montiert. Initialisierung, die DOM-Knoten erfordert, sollte hier gehen. Wenn Sie Daten von einem Remote-Endpunkt laden müssen, ist dies ein guter Ort, um die Netzwerkanforderung instanziieren . Wenn in dieser Methode der Status gesetzt wird, wird ein erneutes Rendering ausgelöst.

schreiben es so:

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

Wie Mayank Shukla wies darauf hin, Anrufe AJAX typischerweise während der Lifecycle-Methoden aufgerufen werden. Lesen Sie mehr unter https://facebook.github.io/react/docs/state-and-lifecycle.html.

Warum der zweite AJAX-Aufruf den ersten beeinflusst, wenn sie sich auf unabhängige Statusbereiche auswirken (so scheint es), sollten sie sich nicht gegenseitig beeinflussen, da Statusaktualisierungen zusammengeführt werden sollten. Wenn sich jedoch beide Aufrufe gegenseitig beeinflussen, würde ich vorschlagen, Callback zu verwenden oder zu versprechen, dass die Reihenfolge der Statusaktualisierungen konsistent ist.