☰

React setStateがすぐに更新されない 質問する

tag-icon • tag-icon reactjs redux state setstate
React setStateがすぐに更新されない 質問する

私はToDoアプリケーションに取り組んでいます。これは問題となっているコードの非常に簡略化されたバージョンです。チェックボックスがあります:

 <p><input type="checkbox"  name="area" checked={this.state.Pencil}   onChange={this.checkPencil}/> Writing Item </p>

チェックボックスを呼び出す関数は次のとおりです。

checkPencil(){
   this.setState({
      pencil:!this.state.pencil,
  }); 
  this.props.updateItem(this.state);
}

updateItemはreduxにdispatchするようにマッピングされた関数です。

function mapDispatchToProps(dispatch){
  return bindActionCreators({ updateItem}, dispatch);
}

私の問題は、updateItem アクションを呼び出して状態を console.log すると、常に 1 ステップ遅れてしまうことです。チェックボックスがオフで true でない場合でも、updateItem 関数に渡される状態は true です。状態を強制的に更新するには、別の関数を呼び出す必要がありますか?

ベストアンサー1

setState は非同期的に実行されるため、2 番目の関数を setState へのコールバックとして呼び出す必要があります。次のようになります。

this.setState({pencil:!this.state.pencil}, myFunction)

ただし、あなたの場合は、その関数をパラメータ付きで呼び出す必要があるため、もう少し創造的になって、おそらくプロパティ内の関数を呼び出す独自の関数を作成する必要があります。

myFunction = () => {
  this.props.updateItem(this.state)
}

これらを組み合わせれば動作するはずです。

おすすめ記事