编辑只读javascript对象

Question

我有一个由GraphQL(vue apollo(查询返回的只读对象，只读的结果看起来像这样：

result: {
id: 'yh383hjjf',
regulations: [{ title: 'Test', approved: false}]
})

我想将其绑定到一个表单，并能够编辑/更新规则数组中的值，并将其保存回数据库。

在我尝试编辑的时刻，我得到了以下错误：

Uncaught TypeError: "title" is read-only

我尝试使用对象克隆数据库返回的结果。分配

//target template
const regulatoryApprovals = {
id: null,
regulations: [{ title: null, approved: null}]
})
regulatoryApprovals = Object.assign(regulatoryApprovals, result, {
regulations: Object.assign(regulatoryApprovals.regulations, result.regulations)
})

但这并没有奏效。

有人知道我如何正确地克隆结果吗？

Answer 1

regulatoryApprovals= Object.assign(regulatoryApprovals, ...表示问题，因为regulatoryApprovals是用Object.assign修改的，因此不需要赋值。

需要克隆只读regulatoryApprovals对象。regulations是一个数组，除非知道需要替换数组元素，否则不会与Object.assign正确合并。应该是：

regulatoryApprovals = {
...regulatoryApprovals,
...result,
regulations: [...regulatoryApprovals.regulations, result.regulations]
}

其中{ ...regulatoryApprovals, ... }是Object.assign({}, regulatoryApprovals, ...)的快捷方式。