React Redux异步函数使用疑问：为何FETCH_COUPONS_REQUEST触发两次？

我来帮你拆解下这个问题——虽然你的代码逻辑上看起来fetchCoupons()是在createCoupon完成后才调用，但控制台里的请求出现两次，大概率是这几个原因：

1. createCoupon内部已经偷偷触发了一次fetchCoupons #

你可以检查下createCoupon这个action对应的处理逻辑（不管是用thunk、saga还是其他中间件），有没有在CREATE_COUPON_SUCCESS的回调里自动调用了fetchCoupons。如果是这样，就会出现两次请求：一次是createCoupon内部触发的，另一次是你在handleSubmit里手动调用的。

举个例子，如果你的thunk是这么写的：

export const createCoupon = (couponData) => async (dispatch) => {
  try {
    await api.createCoupon(couponData);
    dispatch({ type: 'CREATE_COUPON_SUCCESS' });
    dispatch(fetchCoupons()); // 这里已经调用了一次
  } catch (err) {
    dispatch({ type: 'CREATE_COUPON_FAILURE' });
  }
};

那你的handleSubmit里又手动调用一次this.props.fetchCoupons()，自然就会出现两次请求了。

2. 组件重新渲染导致fetchCoupons被重复调用 #

如果你的组件在createCoupon完成后，因为Redux状态更新（比如coupons列表变化）触发了重新渲染，而你又在组件的生命周期钩子（类组件的componentDidMount/componentDidUpdate，或者函数组件的useEffect）里调用了fetchCoupons，也会导致两次请求：一次是你手动调用的，一次是组件更新时自动触发的。

比如类组件里如果写了：

componentDidUpdate(prevProps) {
  if (prevProps.coupons !== this.props.coupons) {
    this.props.fetchCoupons(); // 状态更新后再次调用
  }
}

或者函数组件的useEffect依赖了coupons：

useEffect(() => {
  fetchCoupons();
}, [coupons]);

都会触发额外的一次请求。

3. 小概率：事件绑定或组件挂载重复触发 #

这种情况可能性较低，但也可以排查下组件有没有被重复挂载，或者handleSubmit有没有被多次绑定导致触发两次。不过从你描述的“FETCH_COUPONS_REQUEST在CREATE_COUPON_SUCCESS前后各出现一次”来看，这种情况概率不大。

快速排查方法 #

• 在handleSubmit里的this.props.fetchCoupons()前加个console.log('手动调用fetchCoupons')，再在fetchCoupons的action开头加日志，看看两次请求分别来自哪里。
• 检查组件的生命周期钩子或useEffect，有没有自动触发fetchCoupons的逻辑。

如果是第一种情况，去掉handleSubmit里的this.props.fetchCoupons()就行，因为createCoupon成功后已经自动刷新列表了；如果是第二种情况，需要调整生命周期钩子的依赖条件，避免不必要的重复调用。

内容的提问来源于stack exchange，提问作者Ayech Hamza