Ruft setState render ist nicht vermeidbar

Reagieren Dokument besagt, dass die render Funktion sollte Reine was bedeutet, es sollte nicht mit this.setState.Ich glaube jedoch, dass, wenn der Staat angewiesen auf "remote", d.h. Ergebnis von ajax-call.Die einzige Lösung ist setState() innerhalb einer render Funktion

In meinem Fall.Unsere Benutzer können in der Lage sein sollten, um sich anzumelden. Nach der Anmeldung müssen Wir auch prüfen, den Zugriff des Benutzers (ajax-call )zu entscheiden, wie die Seite angezeigt wird.Der code ist so etwas wie das

React.createClass({
     render:function(){
          if(this.state.user.login)
          {
              //do not call it twice
              if(this.state.callAjax)
              {
              var self=this
              $.ajax{
                  success:function(result)
                  {
                      if(result==a) 
                      {self.setState({callAjax:false,hasAccess:a})}
                      if(result==b) 
                      {self.setState({callAjax:false,hasAccess:b})}

                  }
              }
              }
              if(this.state.hasAccess==a) return <Page />
              else if(this.state.hasAccess==a) return <AnotherPage />
              else return <LoadingPage />
          }
          else
          {
            return <div>
                   <button onClick:{
                   function(){this.setState({user.login:true})}
                   }> 
                   LOGIN
                   </button>
                   </div>
          }
     }
})

Den ajax-Aufruf nicht erscheinen können in componentDidMount weil, wenn Benutzer klicken Sie auf LOGIN-button wird die Seite neu gerendert, und es müssen auch ajax-call .Also vermute ich, dass der einzige Ort, an setState ist innerhalb der render Funktion, die einen Verstoß gegen das Prinzip Reagieren

Besser Lösungen ? Vielen Dank im Voraus

Rufen Sie $.ajax wo immer Sie Sie nennen this.setState({ callAjax: true }).
anfangs ist wahr, habe ich es als falsch, weil ich nicht anrufen möchten, das zweite mal. Oder es wird eine unendliche Schleife Rendern und setState
Könnten Sie ein komplettes Beispiel, einschließlich der Verwendung der Komponente?
danke. ich nehme an, dass ich schon kown die anwser. setState-render-Funktion nicht irgendein problem haben, solange in einer asynchronen Weise. wie Ereignis-listener(normaler Weg) oder ajax-call .ich habe gerade getestet, dass, wenn Sie nennen setstate direkt in render.Ausnahme geworfen wird. wenn Sie wickeln es in ein seTimeout Rückruf.es ist in Ordnung
Hier ist ein Beispiel von rechts AJAX-Aufrufe in Komponente facebook.github.io/react/tips/initial-ajax.html

InformationsquelleAutor Guichi | 2016-02-09

  1. 16

    render sollte immer rein bleiben. Es ist eine sehr schlechte Praxis zu tun, Seite-effecty Dingen gibt, und ruft setState ist eine große rote fahne; in einem einfachen Beispiel, wie dies funktionieren kann okay, aber es ist die Straße zu hoch wartbaren Komponenten, plus es funktioniert nur, weil der Nebeneffekt ist async.

    Statt, denken über die verschiedenen Zustände Ihrer Komponenten können in — wie Sie wurden die Modellierung eine state-Maschine (die, es stellt sich heraus, Sie sind):

    • Den ursprünglichen Zustand (Nutzer hat button nicht geklickt wurde)
    • Ausstehenden Genehmigung (Benutzer geklickt-Anmeldung, aber wir wissen nicht, das Ergebnis der Ajax-request noch)
    • Benutzer hat Zugang zu etwas (wir haben das Ergebnis der Ajax-Anfrage)

    Modell, das mit der Komponente state und du bist gut zu gehen.

    React.createClass({
  getInitialState: function() {
    return {
      busy: false, //waiting for the ajax request
      hasAccess: null, //what the user has access to
      /**
       * Our three states are modeled with this data:
       *
       * Pending: busy === true
       * Has Access: hasAccess !==  null
       * Initial/Default: busy === false, hasAccess === null
       */
    };
  },

  handleButtonClick: function() {
    if (this.state.busy) return;

    this.setState({ busy: true }); //we're waiting for ajax now
    this._checkAuthorization();
  },

  _checkAuthorization: function() {
    $.ajax({
      //...,
      success: this._handleAjaxResult
    });
  },

  _handleAjaxResult: function(result) {
    if(result === a) {
      this.setState({ hasAccess: a })
    } else if(result ===b ) {
      this.setState({ hasAccess: b })
    }
  },

  render: function() {
    //handle each of our possible states
    if (this.state.busy) { //the pending state
      return <LoadingPage />;
    } else if (this.state.hasAccess) { //has access to something
      return this._getPage(this.state.hasAccess);
    } else {
      return <button onClick={this.handleButtonClick}>LOGIN</button>;
    }
  },

  _getPage: function(access) {
    switch (access) {
    case a:
      return <Page />;
    case b:
      return <AnotherPage />;
    default:
      return <SomeDefaultPage />;
    }
  }
});
    Sieht in der Tat wie eine umfangreiche und vollständige Antwort. Versucht zu löschen, meine ursprüngliche Antwort, aber Sie konnte nicht, wie es war markiert als die akzeptierte Antwort 🙁
    oh，der Punkt, der Ihre Antwort zu nennen ajax im Erfolgs-callback von einem anderen ajax-call，in dieser Weise besteht keine Notwendigkeit zur Verwendung eines zusätzlichen staatlichen wie 'login' .Aber ich habe irgendwie verzerrt mein Fall,die Anmeldeinformationen gespeichert in "localstorage", wenn der Benutzer bereits.und wir können es überprüfen, indem Parsen.Benutzer.current() (Parser ist ein sdk, die werden bald im Ruhestand ).in deiner Lösung was ist, wenn der Nutzer bereits anmelden müssen nur um zu überprüfen, Zugang? so sollte es sein, einen Zustand zu unterscheiden, wenn der Benutzer-login oder nicht （Parse sdk können prüfen, "localstorage"）, wenn der Benutzer anmelden ,rufen Sie ajax zu prüfen, den Zugang automatisch
    aber deine Idee hat mich inspiriert.Hier ist die Lösung：In componentDidMount wenn der Benutzer anmelden ,rufen Sie ajax, um zu überprüfen zugreifen, sonst nichts.wenn der Benutzer auf die Schaltfläche klickt .login erste ,und in-login callback ,call-ajax-check user access!!!
    du bist willkommen 😉

    InformationsquelleAutor Michelle Tilley

Schreibe einen Kommentar