in reagieren kann nicht erhalten neuen Wert nach sofort setState

Question

Ich arbeite mit Reactjs. in dem ich Fehler einstelle, wenn nicht richtig eingegeben.
Beispielcode ist:

handleChange: function() { 
if(shares) { 
    this.setState({ 
    error_shares:'' 
    }) 
} 
if(this.state.error_shares === ''){ 
    console.log('entered!!') 
} 
} 

Hier Wert von error_state nicht geändertenem Wert in der nächsten reflektieren, wenn

Answer 1

Ja, das ist das gewünschte Verhalten.

Der Grund, warum der Wert nicht aktualisiert wurde, liegt darin, dass Ihre Komponente noch nicht neu gerendert wurde. Wenn Sie eine solche Funktion benötigen, sollten Sie den Rückruf componentDidUpdate verwenden.

Siehe die Lebenszyklusmethoden here.

ERKLÄRUNG:

Hier ist, wie funktioniert Reagieren:

1. Jede Komponente ist eine Funktion der external props + internal state

2. Wenn eine Änderung in einem der beiden ausgelöst wird, Die Komponente wird in die Warteschlange gestellt, um erneut gerendert zu werden (sie ist asynchron, sodass die Clientanwendung nicht blockiert wird).

3. Siehe den obigen Link für die genaue Reihenfolge der Operationen, aber hier ist ein kleiner Beweis des Konzepts.

   import React from 'react'; 
   
   class Example extends React.Component { 
   
       constructor(props, context) { 
        super(props, context); 
        // initial state 
        this.state = { 
         clicked: false 
        }; 
       } 
   
       componentDidUpdate(prevProps, prevState) { 
        console.log(this.state.clicked); // this will show "true" 
       } 
   
       render() { 
        return (
         <button 
          onClick={() => { 
           this.setState({clicked: true}); 
          }} 
         > 
         </button> 
        ); 
       } 
   } 
   

Answer 2

Ja, in der Tat.

setState() mutiert nicht sofort this.state, sondern erzeugt einen ausstehenden Statusübergang. Der Zugriff auf this.state nach dem Aufruf dieser Methode kann möglicherweise den vorhandenen Wert zurückgeben.

http://facebook.github.io/react/docs/component-api.html

Answer 3

Nein, Sie können nicht Aktualisierungswert in der Konsole nur nach setState bekommen. Dies liegt daran, dass, sobald setState aufgerufen wird, die Ansicht erneut gerendert wird. Daher aktualisiertem Wert zu erhalten, können Sie es innerhalb render() .

render(){ 
if(this.state.error_shares === ''){ 
    //your code. 
} 
} 

Answer 4

setState ist in der Natur asynchron überprüfen.

Die zweiten (optional) Parameter ist eine Rückruffunktion, die ausgeführt werden wird, sobald setState abgeschlossen ist und die Komponente neu gerendert wird.

so können Sie so etwas tun.

handleChange: function() { 
    if (shares) { 
     this.setState({ 
      error_shares: '' 
     }, function() { 
      if (this.state.error_shares === '') { 
       console.log('entered!!') 
      } 
     }) 
    } 
} 

Quelle: https://facebook.github.io/react/docs/component-api.html#setstate