[英]TypeError: Object.key is read-only
guys.伙计们。 I'm trying to implement Edit functionality on my invoice app, I pass invoice as props to form state like this:我正在尝试在我的发票应用程序上实现编辑功能,我将发票作为道具传递以形成 state,如下所示:
const EditInvoice = ({invoice}) => {
const [formInputs, setFormInputs] = useState([
]);
const [form,setForm] = useState({
clientCity : invoice.clientAddress.city,
clientCountry : invoice.clientAddress.country,
clientPostCode : invoice.clientAddress.postCode,
clientStreet : invoice.clientAddress.street,
clientEmail : invoice.clientEmail,
clientName : invoice.clientName,
createdAt : invoice.createdAt,
description : invoice.description,
id : invoice.id,
items: formInputs,
paymentDue : invoice.paymentDue,
paymentTerms : invoice.paymentTerms,
senderCity : invoice.senderAddress.city,
senderCountry : invoice.senderAddress.country,
senderPostCode : invoice.senderAddress.postCode,
senderStreet : invoice.senderAddress.street,
status : invoice.status,
total : invoice.total
})
At this point everything works, handleChange function works for everything except for formInputs, i tried setting formInputs state like this const [formInputs, setFormInputs] = useState([...invoice.items]);
此时一切正常,handleChange function 适用于除 formInputs 之外的所有内容,我尝试像这样设置 formInputs state const [formInputs, setFormInputs] = useState([...invoice.items]);
and using useEffect, like this:并使用 useEffect,如下所示:
useEffect(() =>{
setFormInputs([...invoice.items])
},[])
And they both populate the fields, but if I try updating my invoice items array I get read-only type error, just in case, here's what I used for my handleChange function他们都填充了这些字段,但是如果我尝试更新我的发票项目数组,我会收到只读类型错误,以防万一,这就是我用于我的 handleChange function
const handleItemChange = (index,e) =>{
const values = [...formInputs]
values[index][e.target.name] = e.target.value;
values[index].total = (values[index].price * values[index].quantity).toFixed(2);
setFormInputs(values)
}
Hoping you guys could provide me with solution, Thanks in advance!希望各位大神给个解决办法,先谢谢了!
I don't know if it's a hacky way to do it, but this solution seems to work.我不知道这是否是一种 hacky 方式,但这个解决方案似乎有效。
useEffect(() =>{
invoice.items.map(item => setFormInputs(prevState => ([...prevState, {
id : item.id,
name : item.name,
quantity : item.quantity,
price : item.price,
total : item.total
}])))
console.log(formInputs);
},[])
The problem in your code is that your are trying to re-assign a const
value that is read-only (it prevents the re-assignment).您的代码中的问题是您正在尝试重新分配一个只读的const
值(它会阻止重新分配)。 Define your values as let
.将您的值定义为let
。
So instead of所以而不是
const values
you should define it as你应该把它定义为
let values
Because state
may be updated asynchronously, you should not rely on their values for calculating the next state.由于state
可能会异步更新,因此您不应依赖它们的值来计算下一个 state。
change the method like this:像这样改变方法:
const handleItemChange = (index,e) =>{
setFormInputs(prevValues => {
const newValues = [ ...prevValues];
newValues[index][e.target.name] = e.target.value;
newValues[index].total = (values[index].price * values[index].quantity).toFixed(2);
return newValues;
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.