2 回答

TA貢獻1802條經驗 獲得超5個贊
問題
您沒有正確地為狀態和反應協調創建新的數組引用。
您還改變了模板引用對象。
代碼
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,
},
],
},
}));
}

TA貢獻1810條經驗 獲得超4個贊
你想在更新之前復制一個狀態對象(在 JS 數組中是對象)。也許let newUserData = [...this.state.userData]
是避免此錯誤的方法,但您可能需要“深拷貝”。
添加回答
舉報