this.setStateは状態を更新しません

Question

this.setStateをhandleFormSubmitの範囲内で使用しようとしていますが、this.setStateは更新されていません。理由はわかりません。 this.setStateの前にconsole.log(updatePosition)を実行すると、すべてのデータがそこに保存されます。私は何が欠けていますか？ handleChangeにも同様のコードを使用していますが、問題はありません。

constructor(props) { 
    super(props); 

    let uniqueId = moment().valueOf(); 

    this.state = { 
    careerHistoryPositions: [{company: '', uniqueId: uniqueId, errors: {} }], 
    }; 

    this.handleFormSubmit = this.handleFormSubmit.bind(this); 
} 




handleFormSubmit(event) { 
    event.preventDefault(); 
    const { careerHistoryPositions } = this.state; 

    const updatePosition = this.state.careerHistoryPositions.map((careerHistoryPosition) => { 
    const errors = careerHistoryValidation(careerHistoryPosition); 
    return { ...careerHistoryPosition, errors: errors }; 
    }); 

    console.log(updatePosition) 
    this.setState({ careerHistoryPositions: updatePosition }); 
} 

Answer 1

あなたはhandleFormSubmitチャンスはそれがDOMイベントにバインドされたということです呼び出しているか示すべきです。だからthisはクラス/コンポーネントではなく、console.log(this);の場合は、フォーム要素であるDom要素であることがわかります。

があなたのコンポーネントconstructor()方法では、意図したとおりにコードを動作させるために、反応するコンポーネントのクラスメソッドにハンドラ関数を再バインドするためにこれを追加し、あなたはthis.stateとthis.setState()

this.handleFormSubmit = this.handleFormSubmit.bind(this); 

Answer 2

維持するためにアクセスすることができます状態はすぐには更新されないことに注意してください。それが更新されているかどうかを確認する場合は、コールバック関数を使用してください。何かを次のようにドキュメントから

this.setState({ careerHistoryPositions: updatePosition },() => console.log(this.state.careerHistoryPositions); 

：

SETSTATE（）はすぐにthis.state変異させるが、 保留の状態遷移を作成しません。この メソッドを呼び出した後this.stateにアクセスすると、潜在的に既存の値が返される可能性があります。 setStateへの呼び出しの同期操作を保証する はなく、パフォーマンス向上のために を呼び出してもよいでしょう。

これが役に立ちます。