Reagieren Sie darauf, dass setState den Status nicht aktualisiert

Also ich habe folgendes:

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 ist nur ein Array von Zahlen, [1, 5, 9]z. B. this.state.dealersOverallTotalgibt es nicht die richtige Summe, totalaber? Ich habe sogar eine Zeitüberschreitung verzögert, um zu sehen, ob dies das Problem gelöst hat. irgendwelche offensichtlichen oder sollte ich mehr Code posten?

setState()ist normalerweise asynchron, was bedeutet, dass es zum Zeitpunkt console.logdes Status noch nicht aktualisiert ist. Versuchen Sie, das Protokoll in den Rückruf der setState()Methode einzufügen . Es wird ausgeführt, nachdem die Statusänderung abgeschlossen ist:

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

setState ist asynchron. Sie können die Rückrufmethode verwenden, um den aktualisierten Status abzurufen.

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

Verwenden von async / await

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

Die setState()Operation ist asynchron und daher wird Ihr Vorgang console.log()ausgeführt, bevor setState()die Werte mutiert werden und Sie das Ergebnis sehen.

Um dies zu lösen, protokollieren Sie den Wert in der Rückruffunktion von setState():

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

Bei Haken sollten Sie einen useEffectHaken verwenden.

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

setFruit('Apple');

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

Der Setstate reagiert asynchron. Um den aktualisierten Status in der Konsole anzuzeigen, verwenden Sie den folgenden Rückruf (die Rückruffunktion wird nach dem Setstate-Update ausgeführt.)

Die folgende Methode wird "nicht empfohlen", aber zum besseren Verständnis können Sie den aktualisierten Status in der nächsten Zeile sehen, wenn Sie den Status direkt mutieren. Ich wiederhole dies ist "nicht zu empfehlen"

Fügen componentDidUpdate(){}Sie einfach eine Methode in Ihren Code ein, und es wird funktionieren. Hier können Sie den Lebenszyklus von React Native überprüfen:

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

Ich hatte ein Problem beim mehrmaligen Einstellen des Reaktionsstatus (es wurde immer der Standardstatus verwendet). Nach diesem React / Github- Problem hat es bei mir funktioniert

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

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

Ich hatte die gleiche Situation mit einem verschlungenen Code, und nichts von den vorhandenen Vorschlägen hat für mich funktioniert.

Mein Problem war, dass setStatedies von einer von einer der Komponenten ausgegebenen Rückruffunktion geschah. Und mein Verdacht ist, dass der Anruf synchron erfolgte, was dies verhindertesetState Setzen des Status überhaupt verhinderte.

Einfach gesagt, ich habe so etwas:

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

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

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

Die Art , wie ich zu „reparieren“ hatte es setzt doUpdate()in setTimeoutetwa so aus :

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

Nicht ideal, aber sonst wäre es ein bedeutendes Refactoring.