2 回答

TA貢獻1995條經驗 獲得超2個贊
this.setState
中的兩個調用onSubmitHandler
將一起進行批處理。
來自React Docs - setState():
將 setState() 視為請求而不是更新組件的即時命令。為了更好地感知性能,React 可能會延遲它,然后在一次傳遞中更新多個組件。React 不保證狀態更改會立即應用。
setState() 并不總是立即更新組件。它可能會分批更新或將更新推遲到以后。這使得在調用 setState() 之后立即讀取 this.state 成為一個潛在的陷阱
所以當你這樣做時...this.state.errors
,this.state.errors
在兩個if
塊中,指的是一個空對象。結果,您只能在狀態中看到對象surname
中的鍵。errors
您可以通過復制this.state.errors
對象來解決此問題,在復制的對象中添加鍵,然后將該復制的對象傳遞給this.setState
.
onSubmitHandler = e => {
? ? e.preventDefault();
? ??
? ? // clone the "errors" object
? ? const errors = { ...this.state.errors };
? ??
? ? //Check if first Name is returned empty
? ? if(this.state.user.name.trim().length === 0) {
? ? ? ? ?errors.name = "This field is required";
? ? }
? ? ? ? ? ??
? ? //Check if last name is returned empty
? ? if(this.state.user.surname.trim().length === 0) {
? ? ? ? errors.surname = "This field is required";
? ? }
? ? this.setState({ errors });
}

TA貢獻1818條經驗 獲得超3個贊
這是因為第二次傳播仍然使用 this.state.errors 的舊值,因為它還沒有改變。在執行 onSubmitHandler 之后,兩個 setStates 可能(在您的情況下:肯定是)稍后進行狀態更新。
將 setState 參數更改為自動使用最新狀態的函數:
onSubmitHandler = e => {
? e.preventDefault();
? //Check if first Name is returned empty
? if (this.state.user.name.trim().length === 0) {
? ? this.setState(state => ({
? ? ? errors: {
? ? ? ? ...state.errors,
? ? ? ? name: "This field is required"
? ? ? }
? ? }));
? }
? //Check if last name is returned empty
? if (this.state.user.surname.trim().length === 0) {
? ? this.setState(state => ({
? ? ? errors: {
? ? ? ? ...state.errors,
? ? ? ? surname: "This field is required"
? ? ? }
? ? }));
? ? return;
? }
}
添加回答
舉報