React Native下拉刷新不更新数据问题求助

问题背景 #

促销页面采用带RefreshControl的ScrollView，通过fetch拉取JSON数据更新useState状态。开发模式运行正常，此前生产环境稳定，但近1个月出现缓存滞留问题：重启应用无法获取最新数据，确认服务器端无异常；删除并重装应用后可拉取正确数据，修改数据后刷新也能正常工作，但部分非技术同事仍受影响。

代码问题分析 #

1. fetch默认缓存策略：React Native环境中fetch对GET请求默认启用缓存，生产环境下旧JSON数据被客户端持久化缓存，导致无法拉取最新内容
2. useCallback依赖缺失：当前onRefresh的useCallback未设置依赖数组，可能导致函数引用异常，影响刷新逻辑执行
3. 刷新状态未同步：刷新过程中未更新refreshing状态，不仅会导致下拉加载动画异常，也可能间接影响数据更新的感知

解决方案 #

1. 强制禁用请求缓存 #

在fetch请求中添加缓存控制头，强制客户端跳过缓存：

// 替换原有fetch调用
fetch(URL, {
  headers: {
    'Cache-Control': 'no-cache, no-store, must-revalidate',
    'Pragma': 'no-cache',
    'Expires': '0'
  }
})

2. 完善刷新逻辑与状态管理 #

修正onRefresh函数，同步更新refreshing状态，并补全useCallback依赖：

const onRefresh = useCallback(async () => {
  setRefreshing(true);
  try {
    await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
    const response = await fetch(URL, {
      headers: {
        'Cache-Control': 'no-cache, no-store, must-revalidate',
        'Pragma': 'no-cache',
        'Expires': '0'
      }
    });
    const newData = await response.json();
    setData(newData);
  } catch (error) {
    await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
    console.error('刷新数据失败:', error);
  } finally {
    setRefreshing(false);
  }
}, []); // 若URL为动态变量，需将其加入依赖数组

3. URL追加时间戳（兜底方案） #

如果缓存控制头不生效，可通过在URL后追加时间戳，让客户端识别为新请求：

const requestUrl = `${URL}?t=${new Date().getTime()}`;
fetch(requestUrl)

补充说明 #

• 上述修改会强制客户端每次请求都拉取最新数据，从根源避免缓存滞留
• 已出现缓存问题的用户，需清除应用缓存或重装才能获取最新数据；后续版本更新后，新用户不会再遇到该问题

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