状態を更新しないsetStateを反応させる

だから私はこれを持っています：

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は単なる数値の配列です。[1, 5, 9]たとえばthis.state.dealersOverallTotal、正しい合計は表示されませんが、表示されますtotalか？これで問題が解決するかどうかを確認するために、タイムアウト遅延を設定しました。明らかなことはありますか、それとももっとコードを投稿する必要がありますか？

setState()通常は非同期です。つまりconsole.log、状態を設定した時点では、まだ更新されていません。setState()メソッドのコールバックにログを入れてみてください。状態変更が完了した後に実行されます。

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

setStateは非同期です。コールバックメソッドを使用して、更新された状態を取得できます。

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

async / awaitの使用

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

setState()操作は、非同期ので、あなたがconsole.log()前に実行されるsetState()突然変異した値を、したがって、あなたは結果を参照してください。

これを解決するにはsetState()、次のようなのコールバック関数に値を記録します。

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

フックの場合は、フックを使用する必要がありますuseEffect。

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

setFruit('Apple');

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

setstateはreactで非同期であるため、コンソールで更新された状態を確認するには、以下に示すようにコールバックを使用します（コールバック関数はsetstateの更新後に実行されます）

以下の方法は「推奨されません」ですが、理解のために、状態を直接変更すると、次の行で更新された状態を確認できます。繰り返しますが、これは「お勧めしません」です

componentDidUpdate(){}コードにメソッドを追加するだけで、機能します。ここで、reactnativeのライフサイクルを確認できます。

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

私はいくつかの複雑なコードで同じ状況にあり、既存の提案からは何もうまくいきませんでした。

私の問題はsetState、コンポーネントの1つによって発行されたコールバック関数から発生していたことでした。そして、私の疑わしいのは、呼び出しが同期的に発生していたため、setState状態をまったく設定できなかったことです。

簡単に言えば、私はこのようなものを持っています：

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

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

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

私はそれを置くことだった「修正」しなければならなかった道doUpdate()へsetTimeout：次のように

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

理想的ではありませんが、そうでなければ重要なリファクタリングになります。

反応状態を複数回設定すると問題が発生しました（常にデフォルト状態を使用していました）。このreact / githubの問題に続いて私のために働いた

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

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