javascript - 动态更新对象中的 Getter 函数

Question

在我的构造函数中，我将状态设置为

this.state = {
  selectedProvider: '',
  selectedPort: '',
  selectedNetwork: '',
  networks: {
    MainNet: {
      disabled: false,
    },
    aTestNetwork: {
      get disabled() {
        return this.selectedProvider === 'aProvider';
      },
    },
}

我正在使用 this.setState() 通过 onClick 函数更新 selectedProvider。但是，this.state.selectedProvider 的值似乎并未更新名为 disabled 的 getter 函数返回的值。

我正在使用 this.state.networks 在下拉菜单中列出网络，我的目的是根据 this.state.selectedProvider 的值动态地将它们列为禁用或启用，如上所述，看起来 getters 值只生成一次。

如何让getter的返回值动态更新？

编辑:能够使用 setter 正确分配 this.selectedProvider 值，并在调用 getter 之前调用它。

set provider(prov) {
  this.selectedProvider = prov;
},
get disabled() {
  return this.selectedProvider === 'aProvider';
},

Answer 1

由于 getter 中的 this 引用它的直接宿主对象，因此最好的选择是绑定(bind)上下文:

const self = this;
this.state = {
  selectedProvider: '',
  selectedPort: '',
  selectedNetwork: '',
  networks: {
    MainNet: {
      disabled: false
    },
    aTestNetwork: {
      get disabled () {
        return self.state.selectedProvider === 'aProvider';
      }
    }
  }
};
// test:
console.log(this.state.networks.aTestNetwork.disabled);
this.state.selectedProvider = 'aProvider';
console.log(this.state.networks.aTestNetwork.disabled);