Question

state = {
   tips [{active: false, amount: 10}, {active: true, amount: 50}, {active: false, amount: 10}]
   active_tip_amount: // compute logic //
}

有什么方法可以从活动提示中计算出active_tip_amout？

对于上述情况，

this.state.active_tip_amout应该为50

Answer 1

我建议active_tip_amount可能不需要存储在状态中。

如果您正在使用派生值，则在需要它们时通常更容易计算它们，而不是试图在它们更改时使其与其他状态保持同步。

在这种情况下，您可以编写一个吸气剂（或方法）以从当前状态计算活动小费金额，然后在需要访问计算值时调用它。

class TipsView extends Component {
  state = {
    tips [{active: false, amount: 10}, {active: true, amount: 50}, {active: false, amount: 10}]
  }

  get active_tip_amount() {
    let activeTip = this.state.tips.find(tip => tip.active);
    if (activeTip) {
      return activeTip.amount;
    } else {
      return 0;
    }
  }

  render() {
    // use the active amount here
    this.active_tip_amount
  }
}

这为您提供了更大的灵活性来计算该值，包括从prop派生该值（甚至使用函数而不是getter对其进行参数化）。

如果您有理由相信按需计算值会减慢您的应用程序运行速度（在这种情况下，这种情况极不可能发生），那么您可以随时记住正在计算它的功能。

您可能会发现阅读有关Redux如何鼓励人们使用memoized selectors解决此类问题的信息很有趣。相同的原则也适用于React组件状态。

反应状态为计算状态取决于其他状态属性

1 个答案: