使用Redux的应用首次加载时useEffect钩子多次触发是什么原因？

问题根因 #

• 多处重复触发fetchCart请求：第一个useEffect绑定的页面focus监听、第三个useEffect的childState依赖在首次加载时都会执行拉取购物车接口，多次请求会导致cartList被多次更新，触发依赖cartList的useEffect多次执行
• 错误修改useSelector返回值：第一个useEffect中手动执行cartList = [];，虽然不会修改Redux store中的原始状态，但会篡改当前作用域下的变量值，可能引发额外的渲染和副作用
• 未区分请求状态：弹窗逻辑没有判断购物车数据是否已经拉取完成，初始状态下的null值会被误判为空购物车，等接口返回后如果确实为空会再触发一次弹窗
• Redux状态引用频繁变更：如果fetchCart对应的reducer在请求pending、成功、失败阶段都会生成新的cartList引用，即使内容没有变化也会触发useEffect执行

修复方案 #

1. 移除无意义的本地变量赋值，删除第一个useEffect中的cartList = [];代码
2. 新增请求状态判断，只在数据拉取完成后才校验购物车状态：你可以复用现有loading变量，或者在Redux中存储购物车接口的请求状态，修改后的弹窗逻辑参考：

// 这里的isCartLoading可以是你组件内的loading状态，也可以从Redux中取接口请求状态
const isCartLoading = useSelector(state => state.productReducer.isCartLoading)

useEffect(() => {
  // 仅在请求结束、且购物车确实为空时触发弹窗
  if (!isCartLoading && cartList?.OrderDTO?.Id === null) {
    if (Platform.OS === 'ios') {
      Alert.alert(
        'Notification',
        'Your Cart is Empty',
        [{text: 'OK', onPress: () => navigation.navigate('Home')}],
        {cancelable: false},
      );
    } else {
      setModalVisible(true);
    }
  }
}, [cartList, isCartLoading]);

3. 合并重复的请求触发逻辑：如果不需要在首次渲染时响应childState变化拉取接口，可以加首次渲染标记避免重复触发：

const isFirstRender = useRef(true)
useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false
    return
  }
  dispatch(fetchCart(tokenData));
}, [childState]);

4. 优化Redux reducer逻辑：确保只有接口请求成功拿到有效数据时，才更新cartList的引用，避免pending、失败阶段无意义的状态更新
5. 可选优化：添加状态缓存避免同一状态重复触发弹窗，用ref记录上一次的购物车ID，仅当ID发生变化且为空时才触发弹窗：

const lastCartId = useRef()
useEffect(() => {
  const currentId = cartList?.OrderDTO?.Id
  if (!isCartLoading && currentId === null && lastCartId.current !== null) {
    // 原有弹窗逻辑
  }
  lastCartId.current = currentId
}, [cartList, isCartLoading])

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