React setState no actualiza el estado

Entonces 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 una matriz de números, [1, 5, 9]por ejemplo, sin embargo this.state.dealersOverallTotal, no da el total correcto, pero total¿lo hace? Incluso puse un retraso de tiempo de espera para ver si esto resolvía el problema. ¿Algo obvio o debería publicar más código?

setState()generalmente es asincrónico, lo que significa que en el momento en que console.logel estado, aún no está actualizado. Intente poner el registro en la devolución de llamada del setState()método. Se ejecuta después de que se completa el cambio de estado:

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

setState es asincrónico. Puede utilizar el método de devolución de llamada para obtener el estado actualizado.

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

Usando async / await

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

La setState()operación es asincrónica y, por lo tanto console.log(), se ejecutará antes de que setState()muta los valores y, por lo tanto, verá el resultado.

Para resolverlo, registre el valor en la función de devolución de llamada de setState(), como:

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

En el caso de los anzuelos, debe utilizar el useEffectanzuelo.

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

setFruit('Apple');

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

El setstate es asíncrono en reacción, por lo que para ver el estado actualizado en la consola, use la devolución de llamada como se muestra a continuación (la función de devolución de llamada se ejecutará después de la actualización de setstate)

El método siguiente "no se recomienda", pero para su comprensión, si modifica el estado directamente, puede ver el estado actualizado en la siguiente línea. Repito que esto es "no recomendado"

solo agrega componentDidUpdate(){} método en su código, y funcionará. puedes consultar el ciclo de vida de react native aquí:

https://images.app.goo.gl/BVRAi4ea2P4LchqJ8

Tuve un problema al configurar el estado de reacción 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
  };
});

Tuve la misma situación con un código complicado, y nada de las sugerencias existentes funcionó para mí.

Mi problema fue que setStateestaba sucediendo desde la función de devolución de llamada, emitida por uno de los componentes. Y mi sospecha es que la llamada se estaba produciendo de forma sincrónica, lo que impedía setStateestablecer el estado en absoluto.

En pocas palabras, tengo algo como esto:

render() {
    <Control
        ref={_ => this.control = _}
        onChange={this.handleChange}
        onUpdated={this.handleUpdate} />
}

handleChange() {
    this.control.doUpdate();
}

handleUpdate() {
    this.setState({...});
}

La forma en que tenía que "arreglar" que era poner doUpdate()en setTimeouteste aspecto:

handleChange() {
    setTimeout(() => { this.control.doUpdate(); }, 10);
}

No es ideal, pero de lo contrario sería una refactorización significativa.