Reaguj setState nie aktualizuje stanu

Więc mam to:

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 to tylko tablica liczb, [1, 5, 9]np. jednak this.state.dealersOverallTotalnie podaje prawidłowej sumy, ale totaltak jest? Ustawiłem nawet limit czasu, aby sprawdzić, czy to rozwiązało problem. jakieś oczywiste czy powinienem wysłać więcej kodu?

setState()jest zwykle asynchroniczna, co oznacza, że ​​w momencie określania console.logstanu nie jest jeszcze aktualizowana. Spróbuj umieścić dziennik w wywołaniu zwrotnym setState()metody. Jest wykonywany po zakończeniu zmiany stanu:

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

setState jest asynchroniczna. Możesz użyć metody wywołania zwrotnego, aby uzyskać zaktualizowany stan.

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

Korzystanie z async / await

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

setState()Operacja asynchroniczna , a tym samym swój console.log()zostanie wykonany przed setState()mutuje wartości i stąd można zobaczyć wynik.

Aby rozwiązać ten problem, zarejestruj wartość w funkcji wywołania zwrotnego setState(), na przykład:

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

W przypadku haczyków należy użyć useEffecthaka.

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

setFruit('Apple');

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

Setstate reaguje asynchronicznie, więc aby zobaczyć zaktualizowany stan w konsoli, użyj wywołania zwrotnego, jak pokazano poniżej (funkcja Callback zostanie wykonana po aktualizacji setstate)

Poniższa metoda jest „niezalecana”, ale dla zrozumienia, jeśli zmienisz stan bezpośrednio, możesz zobaczyć zaktualizowany stan w następnej linii. Powtarzam, że to „nie jest zalecane”

po prostu dodaj componentDidUpdate(){}metodę do swojego kodu i będzie działać. tutaj możesz sprawdzić cykl życia React Native:

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

Miałem problem z kilkakrotnym ustawieniem stanu reakcji (zawsze używał stanu domyślnego). Po tym problemie z odpowiedzią / githubem zadziałał dla mnie

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

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

Miałem taką samą sytuację z jakimś zawiłym kodem i nic z istniejących sugestii nie zadziałało.

Mój problem polegał na tym, że setStatedziało się to z funkcji wywołania zwrotnego, wydanej przez jeden z komponentów. I podejrzewam, że połączenie odbywało się synchronicznie, co zapobiegałosetState w ogóle ustawienie stanu.

Po prostu mam coś takiego:

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

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

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

Sposób miałem do „fix” było umieścić doUpdate()w setTimeoutten sposób:

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

Nie jest to idealne rozwiązanie, ale poza tym byłoby to znaczące refaktoryzacja.