Stenciljs @State() 不适用于 Key:Value 对

Question

我的 Stenciljs 项目中有一个键值对对象，带有 @State() 装饰器，因此当更新一个或多个值时组件会重新渲染，但不会重新渲染。我的对象看起来像这样：

@State() selected: {[key: string]: string} = {x: "", y: "", z: ""};

我按以下方式更新它：this.selected['x'] = newValue;

我知道对象会在需要时进行更新，不会出现任何错误。

关于如何解决这个问题有什么想法吗？

谢谢

Answer 1

基于 Stencil 文档：

mutating an object will not trigger a view update in Stencil, but returning a new copy of the object will

因此您需要将 selected 对象视为不可变对象：

this.selected = {...this.selected, x: newValue};