React setState non aggiorna lo stato

Quindi ho questo:

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 è solo un array di numeri, [1, 5, 9]ad es. tuttavia this.state.dealersOverallTotalnon fornisce il totale corretto ma lo totalfa? Ho anche inserito un ritardo di timeout per vedere se questo ha risolto il problema. ovvio o dovrei inserire più codice?

setState()di solito è asincrono, il che significa che al momento console.logdello stato non è ancora aggiornato. Prova a inserire il log nella richiamata del setState()metodo. Viene eseguito al termine del cambio di stato:

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

setState è asincrono. È possibile utilizzare il metodo di callback per ottenere lo stato aggiornato.

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

Utilizzo di async / await

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

L' setState()operazione è asincrona e quindi console.log()verrà eseguita prima che setState()i valori mutino e quindi vedrai il risultato.

Per risolverlo, registra il valore nella funzione di callback di setState(), come:

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

In caso di hook, dovresti usare useEffecthook.

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

setFruit('Apple');

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

Il setstate è asincrono nella reazione, quindi per vedere lo stato aggiornato nella console utilizzare il callback come mostrato di seguito (la funzione di callback verrà eseguita dopo l'aggiornamento setstate)

Il metodo seguente è "sconsigliato" ma per la comprensione, se si modifica lo stato direttamente è possibile vedere lo stato aggiornato nella riga successiva. Ripeto questo è "sconsigliato"

aggiungi semplicemente il componentDidUpdate(){}metodo nel tuo codice e funzionerà. puoi controllare il ciclo di vita di React Native qui:

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

Ho avuto la stessa situazione con un codice contorto e niente dei suggerimenti esistenti ha funzionato per me.

Il mio problema era che setStatestava accadendo dalla funzione di callback, emessa da uno dei componenti. E il mio sospetto è che la chiamata avvenisse in modo sincrono, il che ha impedito setStatedel tutto l'impostazione dello stato.

In poche parole, ho qualcosa del genere:

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

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

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

Il modo in cui dovevo "aggiustarlo" era mettere doUpdate() in setTimeoutquesto modo:

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

Non è l'ideale, ma altrimenti sarebbe un refactoring significativo.

Ho riscontrato un problema durante l'impostazione dello stato di reazione più volte (utilizzava sempre lo stato predefinito). A seguito di questo problema di react / github ha funzionato per me

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

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