React Native返回栈页面时触发useEffect更新数据的优化方案

方案1：通过导航参数触发定向刷新 #

在从详情页返回时传递刷新标记，目标页面监听参数变化仅在需要时刷新：

步骤1：修改UserDetails页面的返回逻辑 #

const onSetActive = async () => {
  setModalVisible(!modalVisible)
  setLoading(true)
  try {
    const body = {
      _id: item._id,  
      status: "Active",
    }
    const response = await axiosInstance.patch(`/UserData/update`, body)
    await getUserData()
    Alert.alert(
      "Success",
      "User has been set to active!",
      [
        {
          text: "OK",
          onPress: () => navigation.navigate("UserNavigator", { shouldRefresh: true }) 
        }
      ]
    );
  } catch (err) {
    Alert.alert("", err?.response?.data?.message || err?.message);
  }
  setLoading(false)
}

步骤2：在ActiveData/InactiveData页面监听参数 #

import { useRoute, useNavigation } from '@react-navigation/native';

const ActiveData = () => {
  const route = useRoute();
  const navigation = useNavigation();
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        await getUserData();
      } catch (err) {
        Alert.alert("", err?.response?.data?.message || err?.message);
      }
      setLoading(false);
    };

    // 仅当参数存在且为true时执行刷新
    if (route.params?.shouldRefresh) {
      fetchData();
      // 重置参数，避免重复触发
      navigation.setParams({ shouldRefresh: false });
    }
  }, [route.params, navigation]);

  // 页面渲染逻辑...
};

方案2：全局状态管理同步数据 #

用轻量状态管理工具（如Zustand、Jotai）统一维护用户数据，更新后自动同步到所有页面：

步骤1：创建全局数据Store #

// store.js
import { create } from 'zustand';

export const useUserDataStore = create((set) => ({
  activeUsers: [],
  inactiveUsers: [],
  // 获取并更新数据
  loadUserData: async () => {
    try {
      // 替换为你的实际接口请求逻辑
      const activeRes = await axiosInstance.get('/UserData/active');
      const inactiveRes = await axiosInstance.get('/UserData/inactive');
      set({
        activeUsers: activeRes.data,
        inactiveUsers: inactiveRes.data
      });
    } catch (err) {
      Alert.alert("", err?.response?.data?.message || err?.message);
    }
  },
  // 手动触发刷新
  refreshUserData: async () => {
    await useUserDataStore.getState().loadUserData();
  }
}));

步骤2：在列表页面订阅数据 #

// ActiveData.js
import { useUserDataStore } from './store';

const ActiveData = () => {
  const activeUsers = useUserDataStore(state => state.activeUsers);
  const loadUserData = useUserDataStore(state => state.loadUserData);

  // 初始化加载数据
  React.useEffect(() => {
    loadUserData();
  }, []);

  // 直接渲染activeUsers即可，数据更新会自动触发重渲染
  return (
    // 你的列表渲染逻辑...
  );
};

步骤3：在详情页更新后触发全局刷新 #

// UserDetails.js
import { useUserDataStore } from './store';

const onSetActive = async () => {
  setModalVisible(!modalVisible)
  setLoading(true)
  try {
    const body = {
      _id: item._id,  
      status: "Active",
    }
    await axiosInstance.patch(`/UserData/update`, body);
    // 触发全局数据刷新
    await useUserDataStore.getState().refreshUserData();
    Alert.alert(
      "Success",
      "User has been set to active!",
      [
        { text: "OK", onPress: () => navigation.goBack() }
      ]
    );
  } catch (err) {
    Alert.alert("", err?.response?.data?.message || err?.message);
  }
  setLoading(false)
}

方案3：监听导航focus事件，仅从详情页返回时刷新 #

通过判断导航历史，只在从UserDetails页面返回时执行刷新：

// ActiveData.js
import { useNavigation } from '@react-navigation/native';

const ActiveData = () => {
  const navigation = useNavigation();
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    const handleFocus = async () => {
      // 获取当前导航栈
      const navState = navigation.getState();
      if (!navState?.routes || navState.routes.length < 2) return;
      
      // 获取上一个页面
      const previousRoute = navState.routes[navState.routes.length - 2];
      // 仅当从UserDetails返回时刷新
      if (previousRoute?.name === 'UserDetails') {
        setLoading(true);
        try {
          await getUserData();
        } catch (err) {
          Alert.alert("", err?.response?.data?.message || err?.message);
        }
        setLoading(false);
      }
    };

    const unsubscribe = navigation.addListener('focus', handleFocus);
    // 组件卸载时移除监听
    return unsubscribe;
  }, [navigation]);

  // 页面渲染逻辑...
};

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