亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如果我使用傳播運算符,為什么狀態會更新為最新消息?

如果我使用傳播運算符,為什么狀態會更新為最新消息?

白豬掌柜的 2023-05-25 18:11:08
我有一個 React 應用程序,其中有一個包含一些字段和驗證的表單。但是,驗證沒有像我期望的那樣工作。代碼如下:state = {  user: null,  errors: {}}onSubmitHandler = e => {  e.preventDefault();  //Check if first Name is returned empty  if (this.state.user.name.trim().length === 0) {    this.setState({      errors: {        ...this.state.errors,        name: "This field is required"      }    });  }  //Check if last name is returned empty  if (this.state.user.surname.trim().length === 0) {    this.setState({      errors: {        ...this.state.errors,        surname: "This field is required"      }    });    return;  }}現在,當我不提供兩個輸入字段并將它們留空時,我希望我的狀態顯示兩個錯誤消息,即errors: {name: "This field is required", surname: "This field is required"}但我只收到最近的姓氏錯誤。所以我的結果顯示像errors: {surname: "This field is required"}為什么它會覆蓋第一條錯誤消息?任何幫助,將不勝感激。輸入字段的代碼未顯示,因為它們只是帶有 onChange 事件處理程序的輸入標簽。
查看完整描述

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 });

}


查看完整回答
反對 回復 2023-05-25
?
泛舟湖上清波郎朗

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;

? }

}


查看完整回答
反對 回復 2023-05-25
  • 2 回答
  • 0 關注
  • 180 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號