0
私は反応するのが新しいので、私に同行してください。私はログインフォームに取り組んでいます。このフォームは、フォームが提出されてエラーが真になった後、リアルタイムで検証されます。とにかく、私はデフォルトで状態isFormValid: falseのプロパティを持っています。状態の更新が完了したかどうかを確認する方法はありますか？
これはhandleFormSubmissionのコンストラクタを介して更新します：
/**
* handleFormSubmission, submission method for user
* account login. Dispatches the login action.
*
* @param {Object} event
*/
handleFormSubmission(event) {
event.preventDefault();
this.setState({
formSubmitted: true
},() => {
this.validateForm();
if (this.state.isFormValid) {
if (this.state.userCreatingAccount) {
this.props.createUserAccount(
this.state.email,
this.state.password,
this.state.firstName,
this.state.lastName
)
} else {
this.props.login(
this.state.email,
this.state.password
);
}
}
});
}
私は私の状態オブジェクトにformSubmitted: trueを設定し、その後、コールバックを経由して、フォームの送信を実行します。私の問題はthis.validateForm()です。 setStateがthis.validateForm()の内部で一度実行された後にコードが必要です。たぶん私はそれを約束することができますか？ this.validateForm().then(functio.......)。この関数は状態を一度更新するだけでなく、動的に複数回実行するので、問題が発生します。
これは私の検証のフォーム機能である：
/**
* function validateForm, error handling for
* dynamic form input fields. Resets state errors
* on exection, then updates state via callback.
*/
validateForm(){
// Reset state.
this.setState({
isFormValid: true,
errors: Object.assign(this.state.errors, {
email: {},
password: {},
firstName: {},
lastName: {}
})
},() => {
if (this.state.formSubmitted) {
// Iterate over input fields, if length is 0
// set an error via the state name.
for (var inputField in this.state.errors) {
if (this.state.errors.hasOwnProperty(inputField)) {
if (inputField !== 'email') {
if (
!this.state.userCreatingAccount &&
inputField !== 'firstName' &&
inputField !== 'lastName'
) {
if (this.state[inputField].length === 0) {
this.setState({
isFormValid: false,
errors: Object.assign(this.state.errors, {
[inputField]: {
required: true
}
})
});
}
} else {
if (this.state[inputField].length === 0) {
this.setState({
isFormValid: false,
errors: Object.assign(this.state.errors, {
[inputField]: {
required: true
}
})
});
}
}
} else {
// Email validation.
if (this.state[inputField].length === 0) {
this.setState({
isFormValid: false,
errors: Object.assign(this.state.errors, {
[inputField]: {
required: true
}
})
});
} else if (!/^((?!.*\.\.)[a-z0-9\.\-]+[^\.]@[a-z0-9\-]+(?:\.[a-z]+)+)$/mgi.test(
this.state[inputField]
)) {
this.setState({
isFormValid: false,
errors: Object.assign(this.state.errors, {
[inputField]: {
invalid: true
}
})
});
}
}
}
}
}
});
}
かいつまんで、この関数は、入力フィールドの状態を更新します。これらのフィールド値に応じて1,2,3,4などのフィールドを意味する動的に行います。 this.validateForm（）内のロジックを最初に終了します。その直後のコードはthis.validateForm（）の内部で設定された新しい状態値に依存します。しかし、setStateは非同期です。
この質問は理にかなっていますように！前もって感謝します。
したがって、関数自体が終了した後に最初のスニペットの 'this.validateForm（）'の後のロジックを実行させたいのですか？ – Chris
'this.validateForm（）'の中のロジックを最初に終了します。直後のコードは 'this.validateForm（）'の内部で設定された新しい状態値に依存します。しかし、 'setState'は非同期です。 @Chris – Josh