React Native：使用navigation.navigate返回后如何重新获取组件数据？

在React Native应用中，添加新服务后通过navigation.navigate返回StudioServices页面时，服务列表没有更新——原因是useStudioServices钩子中的API请求仅在组件首次挂载时执行，返回页面时不会重新触发。

下面提供几种可行的解决方法：

方案一：利用useFocusEffect监听屏幕焦点 #

React Navigation提供了useFocusEffect钩子，会在屏幕获得焦点时触发（包括从其他页面返回的场景），适合需要每次进入页面都刷新数据的场景。

修改useStudioServices钩子：

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

export const useStudioServices = () => {
  const [services, setServices] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    try {
      setLoading(true);
      const result = await GetStudioServices();
      setServices(result);
    } catch (error) {
      setError(error);
    } finally {
      setLoading(false);
    }
  };
  
  // 用useFocusEffect替代useEffect，配合useCallback避免不必要重渲染
  useFocusEffect(
    useCallback(() => {
      fetchData();
    }, [])
  );

  return { services, loading, error };
};

这样每次StudioServices页面获得焦点时，都会重新调用API获取最新的服务列表。

方案二：监听导航参数触发刷新 #

如果只需要在添加新服务后才刷新数据，可以利用返回时传递的newService参数，监听参数变化来触发数据更新。

第一步：修改useStudioServices钩子，暴露fetchData方法 #

export const useStudioServices = () => {
  const [services, setServices] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    try {
      setLoading(true);
      const result = await GetStudioServices();
      setServices(result);
    } catch (error) {
      setError(error);
    } finally {
      setLoading(false);
    }
  };
  
  useEffect(() => {
    fetchData();
  }, []);

  return { services, loading, error, fetchData }; // 暴露fetchData
};

第二步：在StudioServices页面监听导航参数 #

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

const StudioServices = () => {
  const { services, loading, error, fetchData } = useStudioServices();
  const route = useRoute();
  const navigation = useNavigation();

  useEffect(() => {
    // 当参数中存在newService时，触发数据刷新
    if (route.params?.newService) {
      fetchData();
      // 清除参数，避免下次进入页面重复触发
      navigation.setParams({ newService: undefined });
    }
  }, [route.params, fetchData, navigation]);

  if (loading) {
    return <LoadingScreen />;
  }

  if (error) {
    return (
      <View>
        <Text>Error</Text>
      </View>
    );
  }

  return <ServiceList services={services} />;
};

方案三：直接更新本地状态（减少API调用） #

如果能确保InsertService接口调用成功，可以直接把新添加的服务加到本地列表中，无需再次调用API，提升性能。

第一步：修改useStudioServices钩子，暴露setServices方法 #

export const useStudioServices = () => {
  const [services, setServices] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    try {
      setLoading(true);
      const result = await GetStudioServices();
      setServices(result);
    } catch (error) {
      setError(error);
    } finally {
      setLoading(false);
    }
  };
  
  useEffect(() => {
    fetchData();
  }, []);

  return { services, loading, error, setServices }; // 暴露setServices
};

第二步：在StudioServices页面更新本地列表 #

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

const StudioServices = () => {
  const { services, loading, error, setServices } = useStudioServices();
  const route = useRoute();
  const navigation = useNavigation();

  useEffect(() => {
    const newService = route.params?.newService;
    // 当存在新服务且已有服务列表时，直接更新本地状态
    if (newService && services) {
      setServices([...services, newService]);
      // 清除参数
      navigation.setParams({ newService: undefined });
    }
  }, [route.params, services, setServices, navigation]);

  if (loading) {
    return <LoadingScreen />;
  }

  if (error) {
    return (
      <View>
        <Text>Error</Text>
      </View>
    );
  }

  return <ServiceList services={services} />;
};

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