1

#interestingProblem 任何人都可以解释一下,我在更新第一个代码块中的状态时遇到问题,但是当我更新状态时没有问题,如下面的第二个代码块。

我有一个问题:(不能分配给对象数量的只读属性)

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

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

const newItem = action.payload
state.items = [...state.items, { ...newItem, quantity: 1 }]
4

3 回答 3

2

第一种方法是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]
于 2021-04-03T19:05:31.463 回答
1

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

于 2021-04-03T17:12:30.873 回答
0

因为当我假设在 React 中使用状态进行类似 **kwargs 时,您将无嵌套状态传递给具有嵌套状态的状态,将其重新分配为非嵌套状态,从而破坏您的代码目标。

于 2021-04-03T17:19:37.777 回答