如何移除React Navigation的addListener？状态变更时监听器无法移除

一、监听器无法移除的原因及修复方法 #

1. 错误用法：removeListener传入新回调 #

你的第一个代码示例里，navigation.removeListener传入了一个全新的匿名函数，这是无效的。removeListener要求传入和addListener时完全相同的回调函数引用才能找到并移除对应的监听器，传新函数根本匹配不到旧的监听器，自然无法移除。

2. 正确用法：使用addListener返回的remove函数 #

第二个示例的思路是对的，但如果仍然无效，排查以下几点：

• 确认pageInfo的更新是否真的触发了useEffect重新执行：如果pageInfo是对象类型，要确保每次更新时都是新的引用（比如用useState更新时传递新对象，而不是修改原对象），否则useEffect的依赖不会变化，旧的监听器不会被清理。
• 确认navigation引用是否稳定：如果navigation是从props传入的，可能会因为父组件重新渲染而生成新引用，导致useEffect重复执行但监听器管理混乱。可以用useRef保存稳定的navigation引用：

  const navigationRef = useRef(navigation);
  useEffect(() => {
    navigationRef.current = navigation;
  }, [navigation]);
  

  然后在addListener时用navigationRef.current.addListener。

修复后的标准代码：

useEffect(() => {
  const {page, pageIdx, tab} = pageInfo;

  const handleStateChange = ({data: {state: {routes, index}}}) => {
    if (routes[index].name === name) {
      pageIdx 
        ? getMatchItem(`usr/goods/match/buy/history/${tab}/${page}`)
        : getItem(`usr/goods/auction/bid/${tab}/${page}`);
    }
  };

  const removeListener = navigation.addListener('state', handleStateChange);

  // 清理时调用返回的remove函数
  return removeListener;
}, [pageInfo, navigation, name]); // 确保所有用到的外部变量都加入依赖

二、在监听器回调中修改状态的正确方式 #

监听器回调是异步执行的，可能会捕获到组件旧的状态值，导致状态更新不符合预期，推荐两种方案：

1. 使用状态的函数式更新 #

直接在setState中传入函数，函数接收当前最新的状态值作为参数，返回新状态：

const [list, setList] = useState([]);

// 在监听器回调中
setList(prevList => [...prevList, newItem]);

2. 用useRef保存最新状态 #

如果需要在回调中直接访问最新的状态值，可以用useRef同步状态：

const [page, setPage] = useState(1);
const pageRef = useRef(page);

// 同步状态到ref
useEffect(() => {
  pageRef.current = page;
}, [page]);

// 在监听器回调中
const handleStateChange = () => {
  // 直接访问pageRef.current获取最新值
  getMatchItem(`usr/goods/match/buy/history/${tab}/${pageRef.current}`);
};

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