为何反复获取相同缓存数据？APP离线缓存逻辑修复求助

你的代码里有几个关键问题导致缓存一直是旧数据：

1. useEffect依赖cached引发重复请求：当你调用setCached(true)后，useEffect会再次触发fetchallfeeds，两次请求的缓存操作互相干扰，导致更新逻辑混乱。
2. 异步状态更新的时序问题：setCached(true)是异步操作，在同一个fetchallfeeds调用里，后续的if (cached)判断依然会拿到旧的false值，导致缓存删除逻辑根本没执行（不过其实删除操作是多余的，直接覆盖缓存就行）。
3. Feeds更新逻辑不符合预期：你用[...prevPosts, ...data]追加数据，但你的需求是用新数据替换缓存内容，这会导致feeds变成缓存+新数据的混合，也和缓存更新的逻辑不匹配。

下面是修复后的代码：

const [feeds, setFeeds] = useState([]);
const [page, setPage] = useState(1);
// 改用loadedFromCache标记是否已读取过缓存，避免重复操作
const [loadedFromCache, setLoadedFromCache] = useState(false);

const fetchAllFeeds = async () => {
  try {
    // 只在第一次加载时读取缓存
    if (!loadedFromCache) {
      const storedData = storage.getString('cachedfeeds');
      if (storedData) {
        console.log('Fetching data from cache...');
        setFeeds(JSON.parse(storedData));
        setLoadedFromCache(true);
      }
    }

    // 拉取新数据
    const response = await fetch(`http://localhost:3000/feeds/${page}`);
    const data = await response.json();
    console.log('Fetching data from API...');

    // 直接用新数据覆盖缓存，无需提前删除
    await storage.set('cachedfeeds', JSON.stringify(data));

    // 按照需求替换feeds为新数据，如果是分页场景可以改成追加
    setFeeds(data);
    // 分页场景用这个：setFeeds(prev => [...prev, ...data])
  } catch (error) {
    console.error('数据获取失败:', error);
  }
};

useEffect(() => {
  // 只依赖page，避免因状态变化重复触发请求
  fetchAllFeeds();
}, [page]);

关键改动说明： #

• 替换状态标记：用loadedFromCache替代cached，只在首次加载时读取缓存，避免重复触发请求。
• 简化缓存操作：直接通过storage.set覆盖旧缓存，省去多余的删除步骤。
• 对齐feeds更新逻辑：根据你“替换为新数据”的需求，直接将feeds设置为API返回的新内容；如果是分页加载，再改回追加逻辑。
• 清理依赖项：useEffect只依赖page，避免不必要的重复调用。

如果是分页场景，建议调整缓存策略（比如缓存全量数据或按页缓存），确保缓存和页面数据的一致性。

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