React Navigation中返回页面时如何重置Props清除历史传参？

首先你代码里有个明显错误：声明状态时用的是setData，但后续调用了不存在的setSelectedData，这会导致状态完全无法更新，先把这个基础问题修正。

针对你需要从B返回A时重置状态、确保下次进入B无残留参数的需求，优化后的代码如下：

import {useNavigation, useRoute} from '@react-navigation/native';
import {useState, useEffect} from 'react';

const PageB = () => {
  const navigation = useNavigation();
  const route = useRoute();
  // 修正状态更新函数名，确保状态能正确更新
  const [selectedData, setSelectedData] = useState([]);

  // 仅当路由参数变化且存在有效数据时，更新状态
  useEffect(() => {
    if (route.params?.data?.length) {
      setSelectedData(route.params.data[0]);
    }
  }, [route.params]);

  // 主动返回A的逻辑
  const cancel = () => {
    setSelectedData([]);
    // 清空当前页面的路由参数，避免下次进入时残留
    navigation.setParams({});
    navigation.goBack();
  };

  // 监听所有离开页面B的操作，覆盖系统返回键、手势返回等场景
  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', (e) => {
      // 判断目标页面是否为A
      const prevRoute = navigation.getState().routes[navigation.getState().index - 1];
      if (prevRoute.name === 'PageA') {
        setSelectedData([]);
        navigation.setParams({});
      }
    });

    // 组件卸载时取消监听
    return unsubscribe;
  }, [navigation]);

  return (
    {/* 你的页面渲染内容 */}
  );
};

export default PageB;

核心优化说明： #

• 修正状态更新函数：解决状态无法更新的基础bug
• 精准监听参数变化：把useEffect的依赖从route改为route.params，减少不必要的重渲染，同时增加参数有效性判断，避免空值干扰
• 覆盖所有返回场景：
  • 主动点击返回按钮时，清空状态并清除路由参数
  • 通过beforeRemove导航事件，拦截所有离开B的操作，只要是返回A就执行重置，解决系统返回键、手势返回时状态没重置的问题
• 清除路由参数：调用navigation.setParams({})清空B的参数，确保下次从A进入B时，route.params不会携带之前的数据

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