React Native 向其他屏幕传递state后状态无法动态更新问题求助

算力阿峰

2026-10-15

问题原因

React Navigation 的 route.params 是导航动作触发时的静态快照，你跳转至Module页面时传递的是当时的userData值，后续首页的userData状态更新后，不会自动同步到已经打开的Module页面的路由参数中。
你当前的Module页面代码存在语法错误：console.log(userData) 写在了组件函数体外部，就算参数更新也无法正常打印新值，正确的组件结构要把逻辑代码都放在函数体内部。

解决方案

你可以根据场景选择以下任意一种方案实现响应式更新：

方案1：全局状态管理（最推荐）

用户数据属于跨页面共享的通用状态，推荐用React Context、Zustand、Redux等全局状态工具托管userData：

首页监听firestore数据变更后，更新全局状态中的userData
Module页面直接从全局状态中读取userData，天然具备响应式，无需手动传参同步。

方案2：主动同步路由参数

如果你不想引入全局状态，可以手动同步已打开页面的参数：

首页新增useEffect监听userData变化，当Module页面已存在于导航栈时，主动更新它的路由参数：

useEffect(() => {
  const navState = navigation.getState();
  const moduleRoute = navState?.routes?.find(route => route.name === 'Module');
  if (moduleRoute) {
    navigation.dispatch({
      ...CommonActions.setParams({ userData }),
      target: moduleRoute.key,
    });
  }
}, [userData, navigation]);

Module页面新增useEffect监听路由参数变化，同步更新本地逻辑：

export const ModuleScreen = ({navigation, route}) => {
  const userData = route.params.userData;
  // 监听参数变化
  useEffect(() => {
    console.log('最新userData：', userData);
    // 这里写参数更新后的业务逻辑
  }, [route.params.userData]);

  return (
    // 页面渲染内容
  )
}