javascript - react - setState no actualiza el estado de inmediato

reactjs español

Question

Me gustaría preguntar por qué mi estado no cambia cuando hago un evento onclick. Hace un tiempo busqué que necesito vincular la función onclick en el constructor, pero aún así el estado no se actualiza. Aquí está mi código:

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

Dado que setSatate es una función asincrónica, debe consolar el estado como una devolución de llamada como esta.

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

Answer 2

De acuerdo con React Docs

React no garantiza que los cambios de estado se apliquen de inmediato. Esto hace que leer this.state justo después de llamar a setState () sea un pitfall potencial y potencialmente pueda devolver el valor existing debido a la naturaleza async . En su lugar, use componentDidUpdate o una setState llamada setState que se ejecute justo después de que la operación setState sea exitosa. En general, recomendamos usar componentDidUpdate() para dicha lógica.

Ejemplo:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      counter: 1
    };
  }
  componentDidUpdate() {
    console.log("componentDidUpdate fired");
    console.log("STATE", this.state);
  }

  updateState = () => {
    this.setState(
      (state, props) => {
        return { counter: state.counter + 1 };
      });
  };
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={this.updateState}>Update State</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 3

Esta devolución de llamada es realmente desordenada. Solo usa async wait en su lugar:

async openAddBoardModal(){
    await this.setState({ boardAddModalShow: true });
    console.log(this.state.boardAddModalShow);
}

Answer 4

Si desea realizar un seguimiento del estado se está actualizando o no, entonces la otra forma de hacer lo mismo es

_stateUpdated(){
  console.log(this.state. boardAddModalShow);
}

openAddBoardModal(){
  this.setState(
    {boardAddModalShow: true}, 
    this._stateUpdated.bind(this)
  );
}

De esta manera, puede llamar al método "_stateUpdated" cada vez que intente actualizar el estado para la depuración.

Answer 5

Su estado necesita algo de tiempo para mutar, y dado que console.log(this.state.boardAddModalShow) ejecuta antes de que el estado mute, obtiene el valor anterior como salida. Por lo tanto, debe escribir la consola en la devolución de llamada a la función setState

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

}

setState es asíncrono. Significa que no puede llamar a setState en una línea y asumir que el estado ha cambiado en la siguiente.

de acuerdo con React docs

setState() no muta inmediatamente this.state pero crea una transición de estado pendiente. Acceder a this.state después de llamar a este método puede devolver el valor existente. No hay garantía de operación síncrona de llamadas a setState y las llamadas pueden ser agrupadas para obtener ganancias de rendimiento.

¿Por qué harían setState async?

Esto se debe a que setState altera el estado y provoca el procesamiento. Esta puede ser una operación costosa y hacerla sincrónica puede dejar al navegador sin respuesta.

Por lo tanto, las llamadas a setState son asíncronas y están agrupadas para una mejor experiencia y rendimiento de la interfaz de usuario.

Answer 6

setState() es asíncrono. La mejor manera de verificar si el estado se está actualizando sería en componentDidUpdate() y no poner un console.log(this.state.boardAddModalShow) después de this.setState({ boardAddModalShow: true }) .

según React Docs

Piense en setState () como una solicitud en lugar de un comando inmediato para actualizar el componente. Para un mejor rendimiento percibido, React puede retrasarlo y luego actualizar varios componentes en una sola pasada. Reaccionar no garantiza que los cambios de estado se apliquen de inmediato

Answer 7

setState() no siempre actualiza inmediatamente el componente. Puede realizar lotes o aplazar la actualización hasta más tarde. Esto hace que leer this.state justo después de llamar a setState() un escollo potencial. En su lugar, use componentDidUpdate o una setState llamada setState ( setState(updater, callback) ( setState(updater, callback) ), cualquiera de los cuales está garantizado que se setState(updater, callback) después de que se haya aplicado la actualización. Si necesita establecer el estado en función del estado anterior, lea sobre el argumento del actualizador a continuación.

setState() siempre conducirá a una nueva representación a menos que shouldComponentUpdate() devuelva falso. Si se utilizan objetos mutables y la lógica de representación condicional no se puede implementar en shouldComponentUpdate() , llamar a setState() solo cuando el nuevo estado difiere del estado anterior evitará representaciones innecesarias.

El primer argumento es una función de actualización con la firma:

(state, props) => stateChange

state es una referencia al estado del componente en el momento en que se aplica el cambio. No debe ser mutado directamente. En cambio, los cambios deben representarse construyendo un nuevo objeto basado en la entrada del estado y los accesorios. Por ejemplo, supongamos que deseamos incrementar un valor en estado por props.step:

this.setState((state, props) => {
    return {counter: state.counter + props.step};
});

Answer 8

Afortunadamente, setState recibe una devolución de llamada. Y aquí es donde obtenemos el estado actualizado. Considera este ejemplo.

this.setState(
    { name: "Mustkeom" },
      () => {                        //callback
        console.log(this.state.name) // Mustkeom
      }
);

Entonces, cuando se activa la devolución de llamada, this.state es el estado actualizado. Puede obtener datos mutados / actualizados en la devolución de llamada.

Answer 9

 this.setState({
    isMonthFee: !this.state.isMonthFee,
  }, () => {
    console.log(this.state.isMonthFee);
  })