2 回答

TA貢獻(xiàn)1802條經(jīng)驗 獲得超5個贊
問題
您沒有正確地為狀態(tài)和反應(yīng)協(xié)調(diào)創(chuàng)建新的數(shù)組引用。
您還改變了模板引用對象。
代碼
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
});
}
解決方案
創(chuàng)建您打算更新的所有狀態(tài)的淺表副本。
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,
}
});
}
添加到狀態(tài)的一種稍微更反應(yīng)性的方法是映射來自先前狀態(tài)的數(shù)據(jù)并在模板中傳播,這樣您也不會改變它。
createInvoice = idx => {
this.setState(prevState => ({
userData: {
...prevState.userData,
invoices: [
...prevState.userData.invoices,
{
...UsersJSON[0].invoices[0],
invoiceID: idx + 1,
},
],
},
}));
}

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