道具通过 redux 商店更新,但在 componentDidUpdate 道具没有改变

时间:2021-02-17 17:31:54

标签: reactjs

我有一个对话框,它有一个表单,在模态窗口中显示 redeemableWrp。成功提交表单后,我调用 API getCoupons 更新 redux 存储中的 total_points(大部分减少)。

所以如果我再次点击对话框,它会调用这个函数 redeem

它会做一些计算,但它会计算旧的 props 值而不是新的值。

注意:如果我转到其他页面然后再次返回该页面,它会发生变化,但我想要做的是,如果我停留在同一页面并再次单击“兑换”按钮,它应该显示余额(可兑换WRP)

我的代码

componentDidUpdate(prevProps) {
    if (this.props.total_points !== prevProps.total_points) {
      console.log(this.props.total_points);

      const redeemableWrp = (this.props.active_coupons * this.props.total_points_per_coupon + this.props.total_points);
      this.setState({
        redeemableWrp

      })
    }
  }
redeem = () => {
    console.log(this.props.total_points);
    const redeemableWrp = (this.props.active_coupons * this.props.total_points_per_coupon + this.props.total_points);
    this.setState({
      isRedeemWrpModelOpen: true,
      redeemableWrp
    }
  }
<button class="btn btn-primary  ml-lg-5 pt-3 pb-3  home-btn" onClick={this.redeem}><span>REDEEM WRP</span></button>
<RedeemWrp wrpBalance={this.state.redeemableWrp}
              orderData={null}
              onFormSubmit={() => this.props.getCoupons()}
              onDismiss={() => this.setState({ isRedeemWrpModelOpen: false })}
            />

还原

getCoupons: () => {
      client.get("v1/coupons").then((response) => {
        const {
          active_coupons,
          total_points,
          pending_points,
          coupon_progression_percent,
          total_points_per_coupon,
        } = response.data.data;
        dispatch(
          setCounterData(
            active_coupons,
            total_points,
            pending_points,
            coupon_progression_percent,
            total_points_per_coupon
          )
        );
      });
    }
    case "SET_COUNTER_DATA":
      alert('set counter..')
      return {
        ...state,
        active_coupons: action.active_coupons,
        total_points: action.total_points,
        pending_points: action.pending_points,
        coupon_progression_percent: action.coupon_progression_percent,
        total_points_per_coupon: action.total_points_per_coupon,
      };

0 个答案:

没有答案