编辑只读 javascript 对象答案

【问题标题】：Edit readonly javascript objects编辑只读 javascript 对象
【发布时间】：2021-07-19 01:38:06
【问题描述】：

我有一个由 GraphQL (vue-apollo) 查询返回的只读对象，只读的结果如下所示：

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

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

当我尝试编辑时，我收到以下错误：

Uncaught TypeError: "title" is read-only

我尝试使用 object.assign 克隆数据库返回的结果

//target template
const regulatoryApprovals = {
  id: null,
  regulations: [{ title: null, approved: null}]
})

regulatoryApprovals = Object.assign(regulatoryApprovals, result, {
  regulations: Object.assign(regulatoryApprovals.regulations, result.regulations)
})

但这不起作用。

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

【问题讨论】：

请说明您对regulations 的意图。 result 到底是什么以及您期望的输出到底是什么。
谢谢。目前还不清楚regulatoryApprovals.regulations 和result.regulations 应该如何合并。
我创建了regulationApprovals 作为模板，用于克隆从数据库返回的结果对象。不确定是否甚至需要。很抱歉造成混乱。
那时可能不需要。 id: null 和 [{ title: null, approved: null}] 的作用是什么？ result 已经包含这些字段。基本上Object.assign 进行合并，而不是克隆。发生错误是因为您合并到只读regulations。大批。为了克隆，您需要合并到空对象。

标签： javascript vue.js graphql vuejs3 vue-apollo

【解决方案1】：

regulatoryApprovals= Object.assign(regulatoryApprovals, ... 表示问题，因为regulatoryApprovals 被Object.assign 修改，所以不需要赋值。

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

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

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

【讨论】：