Búsqueda de sitios web

javascript - React setState no actualiza el estado

Así que tengo esto:

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);

console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
  this.setState({ dealersOverallTotal: total });
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total

newDealersDeckTotal es solo un array de números [1, 5, 9] por ejemplo, sin embargo this.state.dealersOverallTotal no da el total correcto pero total sí. Incluso puse un retraso con setTimeout para ver si esto resolvía el problema. ¿Algún detalle obvio o debería publicar más código?

Respuesta #1

setState() suele ser asincrónico, lo que significa que en el momento en que haces console.log del estado, todavía no se ha actualizado. Intenta poner el registro en el callback del método setState(). Se ejecuta después de que se complete el cambio de estado:

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
});

Respuesta #2

En el caso de los hooks, deberías usar el hook useEffect.

const [fruit, setFruit] = useState('');

setFruit('Apple');

useEffect(() => {
  console.log('Fruit', fruit);
}, [fruit])

Respuesta #3

setState es asincrónico. Puedes usar un método de retorno de llamada para obtener el estado actualizado.

changeHandler(event) {
    this.setState({ yourName: event.target.value }, () => 
    console.log(this.state.yourName));
 }

Respuesta #4

Tuve un problema al establecer el estado de React varias veces (siempre usaba el estado predeterminado). Seguir este problema de React/github funcionó para mí

const [state, setState] = useState({
  foo: "abc",
  bar: 123
});

// Do this!
setState(prevState => {
  return {
    ...prevState,
    foo: "def"
  };
});
setState(prevState => {
  return {
    ...prevState,
    bar: 456
  };
});

Respuesta #5

El setState es asincrónico en React, así que para ver el estado actualizado en la consola utiliza el callback como se muestra a continuación (la función de callback se ejecutará después de la actualización del setState)

this.setState({ email: '[email ' }, () => {
   console.log(this.state.email)
)}

Respuesta #6

La operación setState() es asíncrona y por lo tanto tu console.log() se ejecutará antes de que setState() muta los valores y por lo tanto ves el resultado.

Para resolverlo, registra el valor en la función de callback de setState(), así:

setTimeout(() => {
    this.setState({dealersOverallTotal: total},
    function(){
       console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
    });
}, 10)

Respuesta #7

Usando async/await

async changeHandler(event) {
    await this.setState({ yourName: event.target.value });
    console.log(this.state.yourName);
}

Artículos relacionados