开发者问题收集

无法分配给对象的只读属性

2021-04-03
20506

#interestingProblem 有人能解释一下吗,拜托 🤔 我在更新状态时遇到了问题,如第一个代码块中所示,但当我更新状态时没有问题,如下面的第二个代码块中所示。

我遇到了一个问题:(无法分配给对象数量的只读属性)

const newItem = action.payload
newItem.quantity = 1
state.items = [...state.items, newItem]

当我像这样编写代码时没有问题

const newItem = action.payload
state.items = [...state.items, { ...newItem, quantity: 1 }]
3个回答

第一种方法是直接改变 action.payload ,因为您没有创建 newItem 的副本,而是传递了相同的引用。鉴于 action.payload 是只读的,您会遇到错误:

// passing the same reference, 'newItem' points to 'action.payload'
// hence newItem is not copy
const newItem = action.payload
// here you mutate 'action.payload' since 'newItem' points to same reference
newItem.quantity = 1
state.items = [...state.items, newItem]

第二种方法有效,因为您正在从 action.payload 创建副本而不是改变它:

// here 'newItem' still points to same reference 'action.payload'
const newItem = action.payload
// but here you are spreading the values into a new object, not mutating directly
state.items = [...state.items, { ...newItem, quantity: 1 }]

相反,您应该首先为您的方法创建一个副本:

// here you create a new object from 'action.payload''action.payload'
// hence newItem contains the same values but it's a different object
const newItem = { ...action.payload }
// now you are not mutating 'action.payload', only 'newItem' that's a new object
newItem.quantity = 1
state.items = [...state.items, newItem]
buzatto
2021-04-03

action.payload 可能是一个只读对象。在第二个代码块中,扩展运算符将键值对传递给新对象。

jrcamatog
2021-04-03

因为当我在 React 中对状态执行类似 **kwargs 的操作时,我假设你将一个没有嵌套的状态传递给一个具有嵌套状态的状态,并将其重新分配给一个非嵌套的状态,从而破坏了你代码的目标。

Marcus Rose
2021-04-03