组件属性的变化会在所有实例中重现，而不仅仅是一个实例

Question

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v114 可复制演示链接 https://jsfiddle.net/rmadeiraneto/t659usxv/39/ 描述一下那个虫子 如何复现这个漏洞？进入块列表，将自定义组件“示例”拖到画布上画布中显示三个来自默认属性（数组）的元素选择“示例”组件进入特质面板，点击加号图标几次这将将示例组件属性中的项目添加到数组中，并在页面中绘制将另一个示例块拖入画布注意你添加到数组中的项目也在该组件的新实例中显示 预期的行为是什么？ 在更改第一个组件的属性后创建第二个组件实例时，预期第二个组件的属性会是默认值 [1,2,3] 中在 customArray 道具有定义的第一个数组，而不是操作后的数组 [1,2,3,4,5]。 目前的行为是什么？ 当我们更改组件实例的属性时，因为默认对象的引用可能会被保留，我们也在改变组件的默认值，使得在同一组件的所有实例中都重复了对单个组件的修改。当 GrapesJs 为组件属性分配自定义默认值时，需要创建一个对象的浅表副本。当用字符串或整数创建相同内容，...

artf · Accepted Answer

感谢@rmadeiraneto的报告。是的，不幸的是，如果你以这种方式变异数组/对象属性，这就是个问题，为了避免这种情况，你有两个选择：避免直接变异（更新时分配新引用）将“默认值”定义为函数 “''js 默认值： （） => （{ customArray： [1,2,3] }）， ``` 但不幸的是......第二个选项现在😅不行，我会在下一个版本修复它

rmadeiraneto · Answer

@artf使用默认值作为函数是可行的，感谢你的快速回复和提供解决这个问题的替代方案。关于第一个建议，我认为问题不在于人们是否应该变异或不变异对象，因为我们讨论的是使用提供的方法（集合）。抱歉我没时间看源代码，但你很可能在“set”方法里变了默认对象，可能是因为引用来自组件生命周期的早期。同样，没有深入看代码，我假设当你将默认值与组件属性合并时，你保留了对默认对象的引用，而不是使用会返回副本的合并方法，比如 from immutable。我会尽量找时间研究代码，并提出更具体的建议

再次感谢你提供的替代方案和这个了不起的图书馆，继续保持出色的工作！

GJS Helper · Answer

你描述的问题是 JavaScript 中常见的一个陷阱，涉及当可变对象（如数组和对象）被分配为默认值时的处理方式。在 GrapesJS中，当你定义包含数组或对象的defaults组件时，这些组件是通过引用分配给新的组件实例。如果你在某个实例上修改了这样的属性，实际上是在修改原始默认引用，这会影响该组件类型创建的所有后续实例。 根本原因 当你在组件的defaults中定义customArray: [1, 2, 3]时，这个数组[1, 2, 3]只创建一次。每当一个新的“示例”组件实例化时，它的customArray属性都会指向内存中的这个同一个数组。因此，当你修改一个实例的customArray（例如添加一个项目）时，你实际上是在直接更改共享数组。后续实例将继承这个已经修改过的数组，而不是新的[1, 2, 3]。 原始类型（字符串、数字、布尔值）通过值传递，因此不会出现这种行为。 解决方案：init方法中的深度复制默认 最稳健的解决方案是确保每个新组件实例都能获得其独立的数组或对象默认值副本。这可以通过在组件模型中使用init方法实现。init方法在创建组件模型新实例时调用，是进行深度...

组件属性的变化会在所有实例中重现，而不仅仅是一个实例

问题

回答（3）

相关问答

Setting draggable: 'wrapper' does not drop in wrapper

编辑器大小调整时组件工具会出现错位

从“pageManager”加载“组件”和“样式”

在画布中选择自定义组件类型无法正常工作

与此问题匹配的付费插件

相关教程

Introducing Search on GJS.Market

如何在2026年用 GrapesJS 构建AI驱动的页面构建器

2026年构建一个SaaS页面构建器需要多少钱？

浏览插件分类