React Native使用navigation.push时如何保留前序页面的用户数据？

问题诊断 #

你的实现思路核心逻辑是正确的，navigation.push()本身的设计就是向导航栈新增独立的路由实例，符合你连续入栈用户资料页、依次原路返回的需求。
出现回退后所有Profile页都展示最后一次拉取的用户数据，是以下常见原因导致的：

• 用户数据存储在全局共享状态（如Context、Redux、全局变量）中，每次新的Profile页拉取数据后直接覆盖了全局状态的单条用户记录，所有挂载的Profile组件都读取同一个全局值，自然全部展示最新数据。
• Profile组件没有监听route.params的变化，仅在组件首次挂载时触发数据拉取。部分导航框架（如React Navigation）在push相同名称的路由时会复用组件实例，不会重新触发挂载生命周期，导致旧的组件实例不会更新数据。
• 部分自定义导航配置开启了同路由名强制复用逻辑，导致push操作实际没有新增路由实例，只是更新了当前路由的参数。

修复方案 #

方案1：组件内独立维护当前用户数据，绑定路由参数变化 #

在Profile组件内将route.params.userId加入副作用依赖，每次参数变化时重新拉取当前页的用户数据，且使用组件内部状态存储当前用户数据，不依赖全局单条用户状态：

// React Native + React Navigation 示例
import { useEffect, useState } from 'react'
import { useRoute } from '@react-navigation/native'

const Profile = () => {
  const route = useRoute()
  const [currentUser, setCurrentUser] = useState(null)
  const targetUserId = route.params.userId

  // 监听userId变化，每次变更都重新拉取数据
  useEffect(() => {
    // 拉取对应用户数据的逻辑
    getUserInfoApi(targetUserId).then(res => {
      setCurrentUser(res.data)
    })
  }, [targetUserId])

  // 渲染逻辑全部使用组件内部的currentUser，不要读取全局的单条用户状态
}

方案2：全局状态按用户ID做映射存储 #

如果需要全局留存浏览过的用户数据，将全局用户状态的结构调整为键值对映射，按userId作为键存储不同用户的资料，每个Profile页根据自身拿到的userId取对应数据，避免覆盖：

// 全局状态结构示例
const userState = {
  // 不要用单个变量存currentUser
  userMap: {
    '1001': { name: 'User1', avatar: 'xxx' },
    '1002': { name: 'User2', avatar: 'xxx' }
  }
}

// Profile组件取值逻辑
const currentUser = userState.userMap[route.params.userId]

方案3：强制路由实例独立 #

如果是框架路由复用导致的问题，可以在push时传入唯一的路由key，保证每次push都是独立的路由实例：

navigation.push('Profile', {
  userId: state.userId,
  key: `Profile_${state.userId}` // 唯一key避免路由复用
})

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