onClick関数の現在の状態を取得していません

Question

状態管理に反応し、苦労して苦労しました。次のコードでは、ボタンがあります。それをクリックすると、2段階の機能がトリガーされます：

1）いくつかの検証を行い、成功したかどうかに基づいて状態のフラグを更新するには、減速機を呼び出します。

2）状態でupdatedフラグを使用して、検証に失敗した場合はユーザーに通知し、成功した場合は通常のプロセスを続行します。

transfer() { 
    this.props.validateData(); 
    this.notifyOrSend(this.props.validationSucceeded); 
} 

notifyOrSend(validationSucceeded) { 
    if (validationSucceeded === false) { 
    this.refs.validationModal.showModal(); 
    } else { 
    this.props.sendTransfer(); 
    } 
} 

render() { 
    return (
     <div> 
     <Button label="Transfer" onClickFn={this.transfer}/> 
     <ValidationModal ref="validationModal"/> 
     </div> 
); 
} 

...

function mapStateToProps(state) { 
    return { 
    validationSucceeded: state.validatedData.validationSucceeded, 
    }; 
} 

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

私の問題は、私はフラグ（this.props.validationSucceeded）の古いバージョンを取得していますということです。フラグの初期状態はtrueです。ボタンの最初のクリックで検証に失敗した場合、this.props.validationSucceededの値はtrueのままです。 falseへの変更は、2回目のクリックでのみ取得されます。コンソールでは、トリガされるアクションがnextStateのフラグの最新の値を持つことがわかります。このコードを変更して最新の値を取得するにはどうすればよいですか？

Answer 1

setStateはイベントに似ていますが、実際には一度実行されるsetStateに2番目の関数を渡すことができます。

すぐにnotifyOrSendを呼び出しているので、次のレンダリングが発生するまでは状態は変わりません。私はnotifyOrSend関数をコンポーネントの適切なライフサイクルメソッドに移動する方法を検討します。実際にはnotifyOrSendの機能に応じて、componentDidUpdateまたはcomponentWillUpdateのいずれかになります。ザから

はドキュメント反応：直ちにthis.state変異ない

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