javascript - Stenciljs @State() 不适用于键：值对

Question

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

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

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

我知道对象会在需要时更新，并且不会出现错误。

关于如何解决这个问题的任何想法？

谢谢

Answer 1

基于模板文档：

改变一个对象不会触发 Stencil 中的视图更新，但返回一个新的对象副本会

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

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