当 属性 值从 javascript 更改时如何重置所有状态？

Question

我正在使用模板框架。在我的组件中，我使用不同的状态来触发不同的事件。我还从 javascript 更新组件的 属性 值。

我想重置所有状态值并使用更新后的 属性 值重新加载组件。 新的 属性 值负责许多操作，例如调用 api、生成缓存键等

任何人都可以建议我最好的方法来满足我的要求。目前我正在重置 属性 的 watcher 方法中的所有状态并调用 componentWillLoad 事件，但我在这种方法中面临很多问题。

示例代码

@Prop() symbol!: string;
  @Watch('symbol')
  symbolChanged(newSymbol: string, prevSymbol: string) {
    if (newSymbol && newSymbol !== prevSymbol) {
      this.resetStates();
    }
  }
  resetStates() {
   //Reset all state values here
    this.componentWillLoad();
  }

Answer 1

通过在 render 方法的根元素上设置键 属性 将解决我的问题，如下面的代码片段。

 uniqKeyId = uniqid.get();

 @Prop() symbol!: string;
    @Watch('symbol')
    sysmbolWatcher(newSymbol: string, prevSysmbol: string) {
    if (newSymbol != prevSysmbol) {
       //update key attribute each switch of exchange
       this.uniqKeyId = uniqid.get();
       //Set default values based on properties as to consider this as fresh request.
       this.setDefaultValues();
    }
  }

并且在如下所示的渲染方法中

 render() {    
      return (    
        <section class="cid-minichart" key={this.uniqKeyId}>
            //Render markup
        </section>
      );
  }