React Native 如何从编辑页触发主列表页的useEffect刷新表格数据

原有实现问题 #

你的实现存在两个核心错误：

1. React 采用单向数据流，子页面无法直接修改父页面的状态，你在编辑页通过useState接收参数相当于创建了独立的新状态，和主页面的reload完全无关联，修改后自然不会触发主页面更新。
2. 跳转时你传递的参数是数组[reload]，编辑页接收时取route.params.reload，参数键名不匹配也会导致取值失败。

可选实现方案 #

方案1：使用useFocusEffect监听页面焦点（最推荐，实现最简单） #

这是React Navigation提供的原生能力，页面每次获得焦点时自动执行逻辑，不需要跨页面传递状态：

1. 主页面导入依赖

import { useFocusEffect } from '@react-navigation/native';

2. 主页面替换刷新逻辑

// 移除原有reload相关的状态和useEffect，直接使用useFocusEffect
useFocusEffect(
  React.useCallback(() => {
    // 此处编写你的表格数据请求逻辑
    fetchTableList()
    return () => {
      // 可选：页面失去焦点时的清理逻辑，比如取消请求
    }
  }, [])
)

只要编辑完成返回主页面，主页面获得焦点就会自动拉取最新数据，不需要额外传递参数。

方案2：路由参数回传触发标志（仅编辑完成时才触发刷新） #

如果不需要每次切回主页面都刷新，只在编辑完成后才刷新，可以用这种方式：

1. 主页面代码调整

const [isRefresh, setIsRefresh] = useState(false);

// 监听路由参数的refresh标志
useEffect(() => {
  if (route.params?.refresh) {
    // 执行表格刷新逻辑
    fetchTableList()
    // 重置标志避免重复触发
    navigation.setParams({ refresh: false })
  }
}, [route.params?.refresh])

// 跳转编辑页不需要传额外参数
<TouchableOpacity onPress={() => navigation.navigate('addProduct')}>

2. 编辑页提交完成后回传参数

const handleEditSubmit = async () => {
  // 先执行你的编辑数据提交逻辑
  await submitEditRequest()
  // 返回主页面并携带刷新标志
  navigation.navigate('主页面的路由名称', { refresh: true })
}

方案3：全局状态管理（适合复杂多页面联动场景） #

如果你的应用有多级页面都需要修改表格相关数据，可以引入轻量全局状态管理工具（比如Zustand、Jotai，或者React自带的Context），将表格数据存在全局状态中，编辑页修改全局状态后，主页面会自动响应状态变化更新渲染。

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