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

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

為什么我的狀態更新會覆蓋現有數據值?

為什么我的狀態更新會覆蓋現有數據值?

萬千封印 2023-05-11 16:43:01
下面我嘗試獲取用戶數據當前狀態的副本,以及從 json 文件中提取的新發票模板的副本,該文件的鍵值對全部為空。然后我將模板 invoiceID 更改為比 idx 多 1(這是從子組件發送的數字值,它是狀態中所有發票的長度)。最后,我獲取用戶數據的副本并添加到新模板中,然后將新用戶數據保存回狀態,以便它可以在我的列表中更新。  createInvoice = idx => {    let newUserData = this.state.userData;    let template = UsersJSON[0].invoices[0];    template.invoiceID = idx + 1;    newUserData.invoices.push(template);    this.setState({      userData: newUserData    });  }這是我登錄時所有數據的當前狀態:在我點擊 New Invoice + 一次之后:在我多次點擊 New Invoice + 后,問題開始出現:只有所有新的發票 ID 會不斷更新為最新和最好的 ID。我真的不知道為什么會這樣。任何幫助,將不勝感激!我在 github 上的項目的鏈接(查看 invoices 分支,而不是 master): https ://github.com/Brent-W-Anderson/invoice-pdf/tree/invoices
查看完整描述

2 回答

?
12345678_0001

TA貢獻1802條經驗 獲得超5個贊

問題

  1. 您沒有正確地為狀態和反應協調創建新的數組引用。

  2. 您還改變了模板引用對象。

代碼

createInvoice = idx => {

  let newUserData = this.state.userData; // <-- saved state reference

  let template = UsersJSON[0].invoices[0];


  template.invoiceID = idx + 1; // <-- template mutation

  newUserData.invoices.push(template); // <-- mutated state


  this.setState({

    userData: newUserData // <-- saved state reference back into state

  });

}

解決方案

創建您打算更新的所有狀態的淺表副本。


createInvoice = idx => {

  let newInvoices = [...this.state.userData.invoices]; // <-- create a new array reference

  let template = {

    ...UsersJSON[0].invoices[0], // <-- create new template object reference

  };


  template.invoiceID = idx + 1;

  newInvoices.push(template);


  this.setState({

    userData: {

      ...state.userData,

      invoices: newInvoices,

    }

  });

}

添加到狀態的一種稍微更反應性的方法是映射來自先前狀態的數據并在模板中傳播,這樣您也不會改變它。


createInvoice = idx => {

  this.setState(prevState => ({

    userData: {

      ...prevState.userData,

      invoices: [

        ...prevState.userData.invoices,

        {

          ...UsersJSON[0].invoices[0],

          invoiceID: idx + 1,

        },

      ],

    },

  }));

}


查看完整回答
反對 回復 2023-05-11
?
蝴蝶不菲

TA貢獻1810條經驗 獲得超4個贊

你想在更新之前復制一個狀態對象(在 JS 數組中是對象)。也許let newUserData = [...this.state.userData]是避免此錯誤的方法,但您可能需要“深拷貝”。

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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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