我有一个对话框,它有一个表单,在模态窗口中显示 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,
};