编辑只读 javascript 对象

Posted 2023-02-22

【中文标题】编辑只读 javascript 对象

【英文标题】：Edit readonly javascript objects

【发布时间】：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。大批。为了克隆，您需要合并到空对象。

【参考方案1】：

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

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

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

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