React Expo中如何实现每次点击时刷新HomeStacks屏幕的内容？

你当前使用空依赖数组的useEffect只会在组件首次挂载时执行1次，而React Navigation的栈导航默认不会卸载已加载的页面，页面切换时只是压入/弹出栈，不会触发组件重新挂载，因此不会重新执行数据拉取逻辑。

方案1：使用useFocusEffect（推荐） #

这是React Navigation官方提供的专门处理页面获焦时执行逻辑的钩子，每次页面切到前台都会触发执行：

1. 先导入依赖：

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

2. 替换原来的useEffect：

// 把请求函数用useCallback包裹，避免不必要的重复执行
const getItemsListGET = useCallback(async () => {
  try {
    setloading(true);
    const tokenRes = await refreshTokens(tokens.refreshToken);
    dispatch(
      pushAlltoken({
        token: tokenRes.data.token,
        refreshToken: tokenRes.data.refreshToken,
      })
    );
    const listRes = await axios.get(`${myURL}`, {
      headers: {
        Authorization: `Bearer ${tokenRes.data.token}`,
      },
    });
    setMyliste(prev => [...new Set([...prev ,...listRes.data.list])])
    setloading(false);
  } catch (error) {
    console.log("拉取列表出错：", error);
    setloading(false);
  }
}, [tokens.refreshToken, dispatch, myURL]); // 这里填入你实际用到的外部依赖

useFocusEffect(
  useCallback(() => {
    getItemsListGET();
    // 如果需要页面失焦时做清理可以在这里返回清理函数
    return () => {};
  }, [getItemsListGET])
);

注：这里同时优化了你原代码async/await和then混用、内层try catch无法捕获axios异步错误的问题

方案2：监听页面focus事件 #

如果你不想用useFocusEffect，也可以手动监听导航的焦点事件：

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

// 组件内获取navigation实例
const navigation = useNavigation();

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    getItemsListGET();
  });
  // 组件卸载时清除监听
  return unsubscribe;
}, [navigation, getItemsListGET]);

如果不需要每次切页面都强制刷新，可以加缓存时效判断，比如距离上次拉取数据小于5分钟就不重新请求，减少不必要的接口调用。

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