web-dev-qa-db-ja.com

Reactjs-setStateの前の状態が最初の引数で、2番目の引数として小道具

この公式記事で次の行を読みました。

this.propsおよびthis.stateは非同期に更新される可能性があります。次の状態の計算にそれらの値に依存しないでください。

次のコードが例を挙げて達成しようとしていることを誰かに説明していただけますか？.

 this.setState((prevState, props) => ({
  couter: prevState.counter + props.increment
}));

reactjsのこの公式Webサイトを参照していますReact.js

javascriptreactjssetstate
10
QuickCoder

彼らはあなたが以下の例の代わりにそのようにするべきだと言います。

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

setState（）が非同期で発生し、他の更新が発生して値が変更される可能性があるため、このようにアクセスしても状態が正しい値になることを保証できません。以前の状態に基づいて状態を計算する場合は、最新の最新の値があることを確認する必要があります。これにより、それらはsetState（）で呼び出される関数を受け入れますprevStateおよびpropsなので、以下の例のように、正しい値を使用して状態を更新できます。

 // Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));
27
Bruno Mazzardo

ブルーノの答えに追加するために、上記の正しい関数はpure関数と呼ばれます。 Reactは immutability と呼ばれるもので大きくなります。つまり、すべての宣言された値は、可能であれば元の宣言から変更しないでください。その関数の変数は実際の変数ではありませんそれらを渡すまでの小道具と状態。つまり、JavaScript関数スタック（同期呼び出しと非同期呼び出しをキューに入れるスレッド）では、値とプロパティへの参照は異なる方法で格納され、値が「間違っている」かどうかの不確実性が生じます。 「ケース。

5
lehmanad1