为什么navigation.goBack未按预期运行？如何保留页面上一次激活状态？

基础结论 #

navigation.goBack() 本身不支持直接传递参数，它的作用仅为回退到导航栈的上一个页面，不会主动修改上一级页面的状态或路由参数。你遇到的状态重置问题并非goBack导致，而是现有代码存在逻辑错误和闭包陷阱：

• 拼写错误：路由传递的参数名为showCategory，你解构时写为showCateory，会导致初始值取值异常
• setActiveTab为同步方法不支持await，且你在修改状态后立即调用接口用的还是修改前的旧activeTab
• 监听focus事件的useEffect依赖数组为空，内部捕获的activeTab永远是组件第一次挂载的初始值，每次页面获得焦点（包括从详情页返回时）都会用初始值发请求，覆盖你修改后的状态

解决方案 #

方案1：修复现有逻辑闭包问题，保留状态 #

修正状态更新和监听逻辑即可解决返回重置问题：

// 修正切换标签的逻辑
const changeTab = () => {
  const newTab = 'productListB'
  setActiveTab(newTab)
  // 直接用新值发起请求，避免依赖未更新的state
  dispatch(fetchProductList(newTab))
}

// 修正focus监听逻辑，把activeTab加入依赖数组，保证每次触发用最新值
useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    dispatch(fetchProductList(activeTab))
  });
  return unsubscribe;
}, [activeTab, dispatch, navigation]);

方案2：将激活状态同步到路由参数，持久化存储 #

如果希望就算productList组件被销毁重建也能保留上次的激活状态，可以在切换标签时同步更新路由参数：

const changeTab = () => {
  const newTab = 'productListB'
  setActiveTab(newTab)
  // 更新路由参数，永久保留最新激活标签
  navigation.setParams({ showCategory: newTab })
  dispatch(fetchProductList(newTab))
}

特殊场景：从productDetails主动回传参数到productList #

如果你确实需要在返回时传递新的参数，可使用以下两种替代方案实现：

1. 用navigation.navigate替代goBack：如果目标页面已在导航栈中，navigate只会将页面提到栈顶不会新建实例，同时支持传递参数

// productDetails页面返回逻辑
navigation.navigate('productList', { showCategory: '需要传递的最新值' })

2. 跳转时传递回调函数：在productList跳转到详情页时传递状态更新回调，详情页返回前调用回调更新状态

// productList跳转时传参
navigation.navigate('productDetails', {
  onBack: (newTab) => setActiveTab(newTab)
})

// productDetails返回前调用
route.params.onBack('你要更新的标签值')
navigation.goBack()

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