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

Posted

技术标签:

【中文标题】无法分配给对象的只读属性【英文标题】:cannot assign to read-only property of object 【发布时间】:2021-06-30 04:19:22 【问题描述】:

#interestingProblem 谁能解释一下,好吗???? 我在更新第一个代码块中的状态时遇到了问题,但是当我像下面的第二个代码块一样更新状态时没有问题。

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

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

我写这样的代码没有问题

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

【问题讨论】:

【参考方案1】:

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

【讨论】:

【参考方案2】:

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

【讨论】:

【参考方案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]

【讨论】:

以上是关于无法分配给对象的只读属性的主要内容,如果未能解决你的问题,请参考以下文章

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

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

TypeError:无法分配给只读属性 - Karma

无法使用 .map() 分配给只读属性。使用 NextJs 反冲

排序对象数组时出错无法分配给对象'[object Array]'的只读属性'2'

NativeScript Vue nativescript-sqlite 无法分配给“#<Object>”的只读属性“exports”对象