reactjs Apollo不变性错误-无法分配给只读属性

332nm8kg 于 2023-04-20 发布在 React

关注(0)|答案(1)|浏览(120)

我正在尝试解决以下代码抛出的错误：

const [releaseHold] = useMutation(UPDATE_EMPLOYEE_STATUS, {
  update(cache, { data: { employeeUpdateById } }) {
    setLoading(false)
    handleClose()
    const updatedEmployee = { ...employeeUpdateById }
    const updatedEmployees = [...employees]
    updatedUnits.find((unit) => unit._id === updatedEmployee._id).status =
      updatedEmployee.status
    setUnits(updatedEmployees)
  }
})

该错误被抛出为

caught (in promise) ApolloError: Cannot assign to read only property

现在，我知道抛出错误是因为状态的不变性，但我不是已经在上面的代码中做了所需的副本吗？

reactjs

来源：https://stackoverflow.com/questions/76049356/apollo-immutability-error-cannot-assign-to-read-only-property

1条答案

按热度按时间

6ojccjat1#

当扩展一个数组时，你正在创建一个包含与旧数组相同对象的 * 新数组 *（因此对象仍然是不可变的）。
您必须找到要更新的项，展开并更新它，然后将旧对象替换为更新后的数组中的更新对象。
最后，用新的（更新的）数组调用update函数：

const [releaseHold] = useMutation(UPDATE_UNIT_STATUS, {
  update(cache, { data: { unitUpdateById } }) {
    setLoading(false)
    handleClose()
    // find the item index
    const index = units.findIndex(({ _id }) => _id === unitUpdateById._id)
    // create updated item, from existing item + update
    const updatedUnit = { ...units[index], ...unitUpdateById }
    // copy the array
    const updatedUnits = [...units]
    // replace the old item with the updated one in the array copy
    updatedUnits.splice(index, 1, updatedUnit)
    // update the array
    setUnits(updatedUnits)
  }
})

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs Apollo不变性错误-无法分配给只读属性

1条答案

相关问题

热门标签

最新问答