TypeError：无法分配给对象'#<Object>'的只读属性'item'答案

【问题标题】：TypeError: Cannot assign to read only property 'item' of object '#<Object>'TypeError：无法分配给对象'#<Object>'的只读属性'item'
【发布时间】：2023-03-13 11:42:01
【问题描述】：

我有这个问题有几天了，这是我目前的状态结构：

const [inputFields, setInputFields] = useState([
    {
      item: '',
      quantityIssued: 0,
      quantityRequested: '',
      remarks: '',
      unit: '',
    },
  ])

当我点击编辑按钮时，我需要将日期填写到我的状态，例如。

const editHandler = (order) => {
    const custom = [
      {
        item: 'test',
        quantityIssued: 0,
        quantityRequested: 7,
        remarks: '8',
        unit: '1',
      },
      {
        item: 'test2',
        quantityIssued: 0,
        quantityRequested: 7,
        remarks: '8',
        unit: '1',
      },
    ]
    setInputFields(custom)
  }

当我使用该自定义数据时，我可以编辑我的状态数据，但是当我尝试从具有相同结构的服务器中获取该数据时，我会收到错误消息，例如：

 const editHandler = (order) => {
    setInputFields(order.orderItems)
  }

虽然它们是我在上面向您展示的相同数据，但如果我编辑它说错误标题无法分配只读属性

，我无法编辑

这是我的界面：

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

阿罕杜里拉！几天后终于从这个答案中找到了解决方案： https://stackoverflow.com/a/60960285/12463240

在 handleInputChange 中我必须这样做：

const handleInputChange = (e, index) => {
    const { name, value } = e.target
    const old = inputFields[index]
    const updated = { ...old, [name]: value }
    var list = [...inputFields]
    list[index] = updated
    setInputFields(list)
  }

以前是这样的：

  const handleInputChange = (e, index) => {
    const { name, value } = e.target
    var list = [...inputFields]
    list[index][name] = value
    setInputFields(list)
  }

【讨论】：