React 根据 props 值标记计算答案

【问题标题】：React Flagging a Calculation based on props valueReact 根据 props 值标记计算
【发布时间】：2020-10-08 06:19:38
【问题描述】：

我有一个组件，我在两种情况下进行订单估算计算（数量乘以他的价格）

1) 在生命周期方法中

componentDidMount(){
  if (this.props.isRestarted) {
    this.setState({
          orderEstimation: this.props.formData.valNominal * this.props.formData.priceLimit,
   })
}

2) 在活动中

<FormAmountField
    label={}
    placeholder={}
    value={this.state.price}
    onChangeText={(value) => {
    this.setState({
        price: value,
        orderEstimation: parseFloat(value) * parseFloat(this.state.quantity)
    })
}}

正如你在这两种情况下看到的那样：orderEstimation: parseFloat(value) * parseFloat(this.state.quantity)

当this.props.selectedTitleDetails.exchangeHost == "THIS_TEXT" 我想改变parseFloat(value) * parseFloat(this.state.quantity) / 100 的计算时，我有一个案例@

如何在这两种情况下应用此更改？在生命周期和方法上？

【问题讨论】：

你为什么不使用一个带有 Switch case 的函数呢。 enter link description here

标签： javascript reactjs lifecycle setstate

【解决方案1】：

您可以使用状态变量来标记 - exchangeValue。示例：

constructor() {
    this.state = {
        exchangeValue: 1
    }
}

componentDidUpdate(prevProps) {
     if (prevProps.selectedTitleDetails.exchangeHost !== this.props.selectedTitleDetails.exchangeHost 
         && this.props.selectedTitleDetails.exchangeHost === 'THIS_TEXT') {
          this.setState({
               exchangeValue: 100
          })
     }
}

然后您将this.state.exchangeValue 添加到您的计算中

componentDidMount(){
  if (this.props.isRestarted) {
    this.setState({
          orderEstimation: this.props.formData.valNominal * this.props.formData.priceLimit / this.state.exchangeValue,
   })
}

还有

onChangeText={(value) => {
    this.setState({
        price: value,
        orderEstimation: parseFloat(value) * parseFloat(this.state.quantity) / this.state.exchangeValue
    })
}}

【讨论】：