React Native中路由参数在useEffect监听中时而未定义的问题咨询

核心问题 #

1. 变量引用过期：你在组件顶层定义的bookingSuccess仅在组件初始渲染时获取一次，路由参数更新后该变量不会自动同步新值，focus监听回调里始终引用的是初始渲染时的旧值，导致参数变化时无法获取最新结果。
2. useEffect依赖缺失：你的useEffect依赖数组未包含route或bookingSuccess，路由参数变化时useEffect不会重新执行，旧监听回调仍在使用过期变量。
3. 未处理参数不存在场景：直接访问props.route.params.bookingSuccess，若params本身不存在（比如首次进入页面未传参），会直接导致bookingSuccess为undefined。

解决步骤 #

1. 在focus回调内实时获取最新参数 #

不在组件顶层提前获取参数，而是每次页面聚焦时直接从route读取最新值，同时通过可选链和默认值处理参数不存在的情况：

useEffect(() => {
    const unsubscribe = props.navigation.addListener("focus", async () => {
        setIsLoading(true);
        // 实时获取最新参数，添加默认值避免undefined
        const bookingSuccess = props.route.params?.bookingSuccess ?? false;
        console.log('booking : ', bookingSuccess);
        console.log('route : ', props.route);
        
        if (bookingSuccess) {
            setTimeout(() => {
                setTicketScreen(false);
            }, 4000);
        } else {
            setTicketScreen(false);
        }
    });
    return unsubscribe;
}, [props.navigation]);

2. 修复useEffect依赖数组（若需在组件顶层使用参数） #

如果要在组件顶层保留bookingSuccess变量，需将其加入useEffect依赖数组，确保参数变化时重新生成监听回调：

// 组件顶层获取参数，添加可选链和默认值
const bookingSuccess = props.route.params?.bookingSuccess ?? false;

useEffect(() => {
    const unsubscribe = props.navigation.addListener("focus", async () => {
        setIsLoading(true);
        console.log('booking : ', bookingSuccess);
        console.log('route : ', props.route);
        
        if (bookingSuccess) {
            setTimeout(() => {
                setTicketScreen(false);
            }, 4000);
        } else {
            setTicketScreen(false);
        }
    });
    return unsubscribe;
}, [props.navigation, bookingSuccess]); // 将bookingSuccess加入依赖

3. 给路由屏幕设置默认参数 #

在导航栈配置时为Ticket屏幕设置初始参数，从根源避免参数不存在的情况：

// 导航栈配置示例
<Tab.Screen
    name="Ticket"
    component={TicketScreen}
    initialParams={{ bookingSuccess: false }} // 设置默认值
/>

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