Question

无法分配给对象“#<Object>”的只读属性

2022-06-26

4498

javascript reactjs

我正在尝试创建一个重复数组，以便我可以编辑值并将其设置回来，这是我得到的：

const handleInput: any = (index: any, property: any, value: any) => {
  const newCertificates = [...props.resume.certifications];
  newCertificates[index][property] = value;
  props.setResume({ ...props.resume, certifications: newCertificates })
}

但是我收到此错误：

Certificates.tsx:18 Uncaught TypeError: Cannot assign to read only property 'certificationName' of object '#<Object>'

Answer 1

您正尝试直接修改状态，因为 newCertificates 中的对象仍是它们在原始状态中引用的对象。使用 [...] 只会创建数组的浅表副本，因此不会克隆其中的对象（有关更多详细信息，请参阅此处）。在 React 上，你不应该直接修改状态，因为这可能会导致重新渲染的问题，而这正是 TS 试图通过错误告诉你的。

不要修改这些对象，而是在 props.resume.certifications 上使用 .map() ，然后在找到需要修改的对象后返回一个新对象并返回具有更新值的新对象：

props.setResume(resume => ({
  ...resume,
  certifications: resume.certifications.map((obj, i) => 
    i === index ? {...obj, [property]: value} : obj
  )
}));

这样，你就只是读取而永远不会写入你的状态值。