React Native中如何将API获取的member id跨页面传递

以下三种是生产环境验证过的实现方式，根据自己的业务场景选即可。

方案1：路由参数传递（单页面跳转场景首选，无额外依赖） #

90%的普通页面跳转场景用这个就够，只要项目用了React Navigation（RN生态最通用的导航库）就直接用：

• 取值页（接口拉取到member ID的页面）：跳转时直接把ID塞到路由参数里

// 接口拉取逻辑示例
const [memberId, setMemberId] = useState(null)
const loadMemberData = async () => {
  const res = await fetch(/* 你的会员接口地址 */)
  const { data } = await res.json()
  setMemberId(data.memberId) // 先把接口返回的ID存在当前页状态里
}

// 跳转逻辑
const goToTargetPage = () => {
  // 注意：要等接口返回拿到memberId之后再触发跳转，不然传过去是空值
  navigation.navigate('目标页面对应的路由名', { memberId })
}

• 目标接收页：直接从route参数里解构取值

const TargetPage = ({ route }) => {
  const { memberId } = route.params

  useEffect(() => {
    // 拿到ID之后做后续逻辑，比如拉取会员详情、初始化表单
    console.log('接收到的memberId：', memberId)
  }, [memberId])

  return <View>{/* 页面业务组件 */}</View>
}

踩坑提醒：如果是嵌套导航跨层级传参，不要硬套路由参数，选下面的全局状态方案更稳妥，避免参数因为路由栈重置丢失。

方案2：全局状态存储（多页面共享ID场景适用） #

如果member ID需要在3个及以上页面/全局组件里使用，不用一层层跳路由传参，直接存在全局状态里：

• 轻量场景不用装第三方库，直接用React内置的Context API即可

// 新建会员信息上下文
const MemberContext = createContext({
  memberId: null,
  setMemberId: () => {}
})

// 在App根组件包裹Provider
const Root = () => {
  const [memberId, setMemberId] = useState(null)
  return (
    <MemberContext.Provider value={{ memberId, setMemberId }}>
      {/* 你的导航容器、根页面节点 */}
    </MemberContext.Provider>
  )
}

• 接口拿到ID的页面直接更新全局值即可，不用等跳转

const { setMemberId } = useContext(MemberContext)
// 接口请求成功回调里直接调用
setMemberId(接口返回的memberId)

• 任意需要用到ID的页面，不管路由层级多深，直接取值就行：

const { memberId } = useContext(MemberContext)

如果项目已经集成了Zustand、Redux、MobX这类状态管理库，直接把memberId存在对应store里即可，逻辑完全一致。

方案3：本地持久化存储（需长期留存ID场景适用） #

如果member ID是用户身份标识，需要App杀进程重开后依然能拿到，接口返回ID后直接存本地存储：

import AsyncStorage from '@react-native-async-storage/async-storage';

// 接口拿到ID后存入本地
const saveMemberId = async (id) => {
  try {
    await AsyncStorage.setItem('user_member_id', String(id))
  } catch (err) {
    console.log('存储memberID失败', err)
  }
}

// 任意页面需要使用时直接读取
const getLocalMemberId = async () => {
  try {
    const storedId = await AsyncStorage.getItem('user_member_id')
    return storedId
  } catch (err) {
    console.log('读取memberID失败', err)
  }
}

常见问题排查 #

• 传值为空：先检查跳转时机，是不是接口还没返回、memberId还是undefined/null的时候就触发了跳转
• 参数丢失：如果传了复杂对象导致序列化报错，只传基础类型的ID值即可，不要整段接口响应都塞路由参数
• 旧版导航语法适配：如果用的是React Navigation 4.x及更早版本，接收参数用navigation.getParam('memberId')即可

内容的提问来源于stack exchange，提问作者075_Jenil Jariwala