setState aktualisiert den Status nicht sofort

Question

Ich möchte fragen, warum mein Zustand sich nicht ändert, wenn ich ein Onclick-Ereignis mache. Ich habe vor einiger Zeit gesucht, dass ich die Onclick-Funktion im Konstruktor binden muss, aber der Status wird nicht aktualisiert. Hier ist mein Code:

import React from 'react'; 

import Grid from 'react-bootstrap/lib/Grid'; 
import Row from 'react-bootstrap/lib/Row'; 
import Col from 'react-bootstrap/lib/Col'; 

import BoardAddModal from 'components/board/BoardAddModal.jsx'; 

import style from 'styles/boarditem.css'; 

class BoardAdd extends React.Component { 

    constructor(props){ 
     super(props); 

     this.state = { 
      boardAddModalShow: false 
     } 

     this.openAddBoardModal = this.openAddBoardModal.bind(this); 
    } 
    openAddBoardModal(){ 
     this.setState({ boardAddModalShow: true }); 
// After setting a new state it still return a false value 
     console.log(this.state.boardAddModalShow); 

    } 

    render() { 

     return (
      <Col lg={3}> 
       <a href="javascript:;" className={style.boardItemAdd} onClick={this.openAddBoardModal}> 
        <div className={[style.boardItemContainer,style.boardItemGray].join(' ')}> 
         Create New Board 
        </div> 
       </a> 



      </Col> 
     ) 
    } 
} 

export default BoardAdd 

Answer 1

Sie Zustand einige Zeit brauchen, zu mutieren und da Ihre console.log(this.state.boardAddModalShow) Anweisung ausgeführt, bevor der Zustand mutiert, können Sie den vorherigen Wert als Ausgabe erhalten. So müssen Sie die Konsole in den Rückruf an die setState Funktion

openAddBoardModal(){ 
     this.setState({ boardAddModalShow: true }, function() { 
      console.log(this.state.boardAddModalShow); 
     }); 

} 

setState asynchron schreiben. Das heißt, Sie können setState nicht in einer Zeile aufrufen und annehmen, dass sich der Status am nächsten geändert hat.

nach React docs

setState() nicht sofort this.state mutieren, sondern schafft einen anhängigen Zustandsübergang. Der Zugriff auf this.state nach dem Aufruf dieser Methode kann möglicherweise den vorhandenen Wert zurückgeben. Es gibt keine Garantie von synchronen Betrieb von Anrufen zu setState und Anrufe können für Leistungssteigerungen gebündelt werden.

Warum würden sie setState async

machen Dies liegt daran, setState den Zustand und verursacht rerendering verändert. Diese kann eine teure Operation sein und es synchrone lassen der Browser nicht reagieren lassen.

Die Aufrufe von setState sind also sowohl asynchron als auch stapelweise für eine bessere Benutzerfreundlichkeit und Leistung bei .