Reactアプリにこのメソッドがあります：
私の問題はcreateQuestions()、findEmployeeId()メソッドが実行される前に実行されることです。.then待たせてはいけませんか？
内部findEmployeeId()ではsetState操作を行っています。それが終わるのを待ちませんか？createQuestions()実行する前にデータを更新する必要があります。
createInterview() {
fetch(API_URL + `/interview/create`, {
method: "PUT",
body: JSON.stringify({
employee: this.state.employee,
employment_level: this.state.employment_level,
audit_id: this.props.auditId,
}),
headers: { "Content-Type": "application/json" },
})
.then((res) => {
if (!res.ok) {
throw new Error();
}
return res.json();
})
.catch((err) => console.log(err))
.then(() => this.findEmployeeId())
.then(() => this.createQuestions());
this.setState({ showHide: false });
}
これがfindEmployeeId方法です。次のものが実行される前に完了するまで待機させるにはどうすればよいですか？
findEmployeeId() {
fetch(API_URL + `/employee/${this.state.employee}/${this.props.auditId}`)
.then((res) => {
if (!res.ok) {
throw new Error();
}
return res.json();
})
.then((result) => {
this.setState({ lastEmployeeId: result[0].employee_id });
console.log(result);
})
.catch((error) => {
console.log(error);
});
}
問題は基本的に、findEmployeeId（）の後にcreateQuestions（）が実行されることを保証する方法を見つけることです。これが質問の核心です。setState Callbackを使用すると、これを実現できます。setStateコールバックの使用は面倒かもしれないと言われていますが、2つの関数の構成について十分に理解している場合は、そうすべきではありません。
setStateは非同期です...したがって、次のような2つの操作の連続性を想定しないことが重要です。
this.setState({stateA : a})
this.setState({stateB : b})
setStateを介してシーケンシャルを「強制」する唯一の方法は、コールバックを使用することです。
this.setState（{....}、（）=> {setStateが完了した後に実行}）
どういうわけか、これはあなたが従う必要があるものです。つまり、findEmployeID内で使用しているsetStateでは、次のようなことを行う必要があります。
const self = this;
this.setState({ ..... }, () => {self.createQuestions()})
その否定を置いた人は誰でも彼の理由をよりよく説明します。フェッチの.then部分は連続性を保証しないため、2つのsetStateが次々に実行されるのと同様の状況になります。待機も連続性を保証するものではありません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加