TypeError: Object.key is read-only

Question

伙计们。我正在尝试在我的发票应用程序上实现编辑功能，我将发票作为道具传递以形成这样的状态：

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

此时一切正常，handleChange 函数适用于除 formInputs 之外的所有内容，我尝试像这样设置 formInputs 状态 const [formInputs, setFormInputs] = useState([...invoice.items]); 并使用 useEffect，像这样：

useEffect(() =>{
    setFormInputs([...invoice.items])
  },[])

它们都填充字段，但如果我尝试更新我的发票项目数组，我会收到只读类型错误，以防万一，这是我用于我的 handleChange 函数的内容

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

希望大家能给我提供解决方案，在此先感谢！

Answer 1

您的代码中的问题是您正在尝试重新分配只读的 const 值（它会阻止重新分配）。将您的值定义为 let.

所以不用

const values

你应该定义为

let values

Answer 2

我不知道这是否是一种 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);
  },[])

TypeError: Object.key is read-only

TypeError: Object.key is read-only

crud

reactjs