React发票应用编辑items时报TypeError: Object.key is read-only求解决方案

你对formInputs仅做了数组层级的浅拷贝，数组内的每个条目对象仍然直接引用了props.invoice传入的只读原始对象，直接修改这些对象的属性就会触发只读TypeError。你之前尝试的两种初始化方式都只处理了数组层级的拷贝，没有处理内层的条目对象。

修改handleItemChange函数，更新条目时先对当前操作的条目对象做拷贝，再修改属性，不要直接修改原引用对象：

const handleItemChange = (index,e) =>{
    const values = [...formInputs]
    // 拷贝当前下标对应的条目对象，切断和原只读对象的引用
    const currentItem = {...values[index]}
    currentItem[e.target.name] = e.target.value;
    // 注意将价格、数量转为数字，避免字符串运算出现NaN
    currentItem.total = (Number(currentItem.price) * Number(currentItem.quantity)).toFixed(2);
    // 用修改后的拷贝对象替换数组对应位置
    values[index] = currentItem
    setFormInputs(values)
}

你当前分开声明了form和formInputs两个状态，form.items的引用不会随formInputs更新自动同步，建议提交数据时再合并两个状态，避免出现数据不一致：

const handleSubmit = () => {
  const finalInvoiceData = {
    ...form,
    items: formInputs
  }
  // 执行后续提交逻辑
}

如果需要进一步简化状态管理，也可以直接把items字段合并到form状态中，无需单独维护formInputs。

内容的提问来源于stack exchange，提问作者Laitas