[解決済み] 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にディスパッチするためにマッピングされた関数です。

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

私の問題は、updateItemアクションを呼び出して状態をconsole.logするとき、常に1ステップ後ろになっていることです。チェックボックスがチェックされておらず、true でない場合、私はまだ updateItem 関数に渡される true の状態を取得します。状態を強制的に更新するために、別の関数を呼び出す必要がありますか？

どのように解決するのですか?

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

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

しかし、あなたの場合、その関数にパラメータを付けて呼び出したいので、もう少し工夫が必要です。おそらく、propsの関数を呼び出す独自の関数を作成する必要があるでしょう。

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

これらを組み合わせれば、うまくいくはずです。