React Native中React Navigation goBack()后如何刷新前页面？

我完全理解你觉得传刷新函数不够优雅还可能踩坑的痛点，下面给你几个React生态里更合适的方案：

1. 用useFocusEffect监听屏幕聚焦（官方推荐） #

React Navigation专门提供了useFocusEffect钩子，用来处理屏幕获得焦点时的逻辑——正好匹配你从Panel B返回Panel A时的场景。当Panel A重新被聚焦，就自动触发数据刷新，完全不需要子组件传函数。

示例代码（Panel A中）：

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

function PanelA() {
  const [data, setData] = useState([]);

  // 定义数据刷新函数
  const fetchData = useCallback(async () => {
    const newData = await fetchYourDatabaseData(); // 替换成你的实际数据请求
    setData(newData);
  }, []);

  // 当屏幕聚焦时调用刷新
  useFocusEffect(
    useCallback(() => {
      fetchData();
      // 可选：如果需要清理操作，比如取消请求，可以在这里返回清理函数
      return () => {
        // 比如 abortController.abort()
      };
    }, [fetchData])
  );

  return (
    // 你的Panel A UI渲染，使用data
  );
}

这个方案的好处是：完全由Panel A自己控制刷新逻辑，和Panel B解耦；官方维护的API，稳定性有保障；还能通过返回清理函数避免请求泄漏的问题。

2. 全局状态管理（适合复杂场景） #

如果你的应用已经在用Context API、Redux或者Zustand这类状态管理工具，直接把Panel A需要的数据存在全局状态里就行。当你在Panel B更新数据库后，同时更新全局状态，Panel A作为状态的消费者，会自动触发重新渲染，拿到最新数据。

举个Context的简单例子：
首先创建全局数据Context：

// DataContext.js
import { createContext, useContext, useState, useCallback } from 'react';

const DataContext = createContext();

export function DataProvider({ children }) {
  const [panelAData, setPanelAData] = useState([]);

  // 更新数据的方法，同时可以同步数据库
  const updatePanelAData = useCallback(async (newData) => {
    await saveToDatabase(newData); // 你的数据库更新逻辑
    setPanelAData(newData);
  }, []);

  // 获取最新数据的方法
  const fetchPanelAData = useCallback(async () => {
    const data = await fetchFromDatabase();
    setPanelAData(data);
  }, []);

  return (
    <DataContext.Provider value={{ panelAData, fetchPanelAData, updatePanelAData }}>
      {children}
    </DataContext.Provider>
  );
}

export function useData() {
  return useContext(DataContext);
}

然后在Panel A中使用：

function PanelA() {
  const { panelAData, fetchPanelAData } = useData();

  // 可以结合useFocusEffect，或者在组件挂载时先拉一次数据
  useEffect(() => {
    fetchPanelAData();
  }, [fetchPanelAData]);

  return (
    // 直接渲染panelAData
  );
}

在Panel B中更新数据：

function PanelB({ navigation }) {
  const { updatePanelAData } = useData();

  const handleSave = async () => {
    const newData = /* 你编辑后的新数据 */;
    await updatePanelAData(newData);
    navigation.goBack();
  };

  return (
    <Button onPress={handleSave} title="保存并返回" />
  );
}

这种方案的优势是：数据状态集中管理，多个组件可以共享；Panel B更新数据后，Panel A自动同步，不需要手动触发刷新逻辑。

3. 优化原有传参方案（如果一定要用的话） #

如果你暂时不想用上面两种方案，也可以优化原来的传函数方式，避免更新未挂载组件的问题：
在Panel A中，用useRef存一个组件是否挂载的标记，然后把带检查的刷新函数传给Panel B：

function PanelA({ navigation }) {
  const isMounted = useRef(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  const refreshData = useCallback(async () => {
    if (!isMounted.current) return;
    const newData = await fetchYourDatabaseData();
    setData(newData);
  }, []);

  const goToPanelB = () => {
    navigation.navigate('PanelB', { onGoBack: refreshData });
  };

  // ...其他逻辑
}

在Panel B中调用时：

function PanelB({ route, navigation }) {
  const { onGoBack } = route.params;

  const handleGoBack = async () => {
    await updateDatabase(); // 你的更新逻辑
    if (onGoBack) {
      onGoBack();
    }
    navigation.goBack();
  };

  // ...其他逻辑
}

不过这个方案还是不如前两个优雅，因为还是存在组件间的耦合，只适合简单场景临时用。

总结下来，优先推荐useFocusEffect（简单场景）或者全局状态管理（复杂场景），这两种方案都能优雅解决你的问题，还能避免潜在的组件未挂载更新错误。

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