componentWillMount wird zweimal ausgeführt

Question

Ich rufe eine API vor dem Mounten einer Komponente auf, aber mein Code ruft zweimal eine API auf. Meine Anforderung besteht darin, nach dem erfolgreichen API-Aufruf Jahresdaten anzuzeigen (es werden Jahresdaten zurückgegeben). Wenn ich die setState-Funktion innerhalb von componentWillMount verwende, sollte sie die render-Methode nicht aufrufen, aber in meinem Fall wird die render-Funktion auch mehrmals aufgerufen.

componentWillMount(){ 
     // Year api call 
      var oauth=GetAuthToken() 
     if(this.props.options.apiName === 'year__c'){ 
      var access_token=oauth.then((data) => { 
      var temp 
      temp=GetYear(data.access_token) 
      temp.then((obj) => { 
       this.setState({ 
       year:obj 
       }) 
      }) 
      })  
     } 
    } 

Answer 1

Das Problem, auf das Sie stoßen, ist, dass Ihr Einstellungsstatus basierend auf einem Versprechen gelöst wurde. In einem normalen componentWillMount Sie SetState, aktualisiert es den Zustand, und dann wird render() zum ersten Mal aufgerufen. Wenn Sie asynchrone API-Aufrufe in das Bild einführen, dann geschieht Folgendes:

componentWillMount wird ausgeführt, ein API-Aufruf wird ausgeführt und ein Promise wird erstellt, während das Promise wartet, um aufgelöst zu werden, wird Code ausgeführt, React führt den Render aus () Methode auf der Komponente. Irgendwann nach dem Auflösen der Verheißung wird setState aufgerufen, und da die Komponente bereits gerendert wurde, muss sie aufgrund einer Zustandsänderung neu gerendert werden.

Der primäre Unterschied zwischen den beiden ist: Wenn Sie nur setState in der componentWillMount dann wird es passieren, bevor Render auftritt. Wenn Sie setState als Teil eines Promise aufgelöst haben, geschieht dies nach dem Rendern der Komponente, wodurch mehrere Rendervorgänge verursacht werden.