React setState ne met pas à jour l'état

Donc j'ai ceci:

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 est juste un tableau de nombres, [1, 5, 9]par exemple this.state.dealersOverallTotalne donne pas le total correct mais le totalfait? J'ai même mis un délai d'attente pour voir si cela résolvait le problème. toute évidence ou devrais-je poster plus de code?

setState()est généralement asynchrone, ce qui signifie qu'au moment où vous console.logl'état, il n'est pas encore mis à jour. Essayez de mettre le journal dans le rappel de la setState()méthode. Il est exécuté une fois le changement d'état terminé:

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

setState est asynchrone. Vous pouvez utiliser la méthode de rappel pour obtenir l'état mis à jour.

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

Utiliser async / await

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

L' setState()opération est asynchrone et par conséquent, votre console.log()sera exécuté avant que setState()les valeurs ne mute et que vous voyez donc le résultat.

Pour le résoudre, enregistrez la valeur dans la fonction de rappel de setState(), comme:

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

En cas de crochets, vous devez utiliser un useEffectcrochet.

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

setFruit('Apple');

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

Le setstate est asynchrone dans react, donc pour voir l'état mis à jour dans la console, utilisez le rappel comme indiqué ci-dessous (la fonction de rappel s'exécutera après la mise à jour de setstate)

La méthode ci-dessous n'est "pas recommandée" mais pour comprendre, si vous changez directement l'état, vous pouvez voir l'état mis à jour dans la ligne suivante. Je répète que ce n'est "pas recommandé"

ajoutez simplement une componentDidUpdate(){}méthode dans votre code, et cela fonctionnera. vous pouvez vérifier le cycle de vie de react native ici:

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

J'ai eu un problème lors de la définition de l'état de réaction plusieurs fois (il a toujours utilisé l'état par défaut). Suite à ce problème de réaction / github a fonctionné pour moi

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

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

J'ai eu la même situation avec un code alambiqué, et rien des suggestions existantes n'a fonctionné pour moi.

Mon problème était que cela setStatese produisait à partir de la fonction de rappel, émise par l'un des composants. Et mon soupçon est que l'appel se produisait de manière synchrone, ce qui a empêché setStatedu tout de définir l'état.

En termes simples, j'ai quelque chose comme ça:

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

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

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

La façon dont je devais "réparer" c'était de mettre doUpdate()en setTimeoutcomme ceci:

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

Pas idéal, mais sinon ce serait une refactorisation importante.