React Native退出屏幕时避免回调堆叠，仅单次更新Redux状态

你的问题根源在于useEffect依赖了selectedProducts，每次这个状态更新时，都会向beforeRemove事件新增一个回调，但旧的回调没有被清理，导致退出屏幕时多个回调堆叠执行，重复触发Redux的dispatch。

最优解决方案：用useRef保存最新状态，只添加一次监听 #

通过useRef同步最新的selectedProducts值，然后仅在组件挂载时添加一次beforeRemove监听，同时在组件卸载时移除监听，确保退出时只执行一次回调：

import { useEffect, useRef } from 'react';

// 组件内部逻辑
const selectedProductsRef = useRef(null);

// 实时同步本地状态到ref，确保ref始终保存最新值
useEffect(() => {
  selectedProductsRef.current = selectedProducts;
}, [selectedProducts]);

// 仅在组件挂载时添加一次beforeRemove监听
useEffect(() => {
  // 保存监听的卸载函数
  const unsubscribe = navigation.addListener('beforeRemove', () => {
    const latestQty = selectedProductsRef.current;
    console.log('check this', latestQty);
    // 只有当有选中数量时才更新Redux
    if (latestQty) {
      dispatch(addToCartMultipleQty(latestQty));
    }
  });

  // 组件卸载时移除监听，避免内存泄漏和残留回调
  return unsubscribe;
}, [navigation, dispatch]);

为什么这个方案能解决问题？ #

1. useRef的current属性会持续保存最新的selectedProducts值，不会因为组件重新渲染而丢失
2. beforeRemove监听仅添加一次，不会随着状态更新重复添加，避免回调堆叠
3. 返回unsubscribe函数在组件卸载时清理监听，防止内存泄漏

补充说明 #

如果你的selectedProducts初始值是null，点击按钮时会转为数字并增减，这个方案完全适配：退出屏幕时，selectedProductsRef.current会拿到最后一次修改后的数值，只执行一次Redux的dispatch操作。

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