如何正确实现缓存与API数据同步：避免无限循环与重复数据问题-js教程-PHP中文网

如何正确实现缓存与API数据同步：避免无限循环与重复数据问题

本文详解如何在react应用中安全实现离线缓存逻辑，重点解决因依赖项误设导致的无限请求循环、缓存未更新、数据重复加载等常见问题，并提供健壮的缓存替换方案。

本文详解如何在react应用中安全实现离线缓存逻辑，重点解决因依赖项误设导致的无限请求循环、缓存未更新、数据重复加载等常见问题，并提供健壮的缓存替换方案。

在构建具备离线能力的 React 应用时，常见的「先读缓存、再拉新数据并更新缓存」模式极易因副作用管理不当引发严重问题——最典型的就是 无限循环请求 和 缓存始终不更新。你提供的代码中，useEffect 将 cached 作为依赖项，而 fetchallfeeds() 内部又通过 setCached(true) 修改该状态，导致每次状态更新都触发新一轮 useEffect 执行，进而反复调用 API，形成死循环。同时，setFeeds(prevPosts => [...prevPosts, ...data]) 在首次加载时会叠加缓存数据与 API 数据，造成重复渲染。

✅ 正确的缓存-网络双源策略（Stale-while-revalidate）

我们应遵循「分离关注点」原则：缓存读取与网络请求解耦，状态更新可控，副作用仅响应必要变化。以下是优化后的完整实现：

import { useState, useEffect } from 'react';
import { storage } from './storage'; // 假设为 MMKV / AsyncStorage 封装

const FeedList = () => {
  const [feeds, setFeeds] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchFeeds = async (shouldRefresh = false) => {
    setLoading(true);
    try {
      let cachedData = null;
      // 1️⃣ 仅首次加载时尝试读取缓存（非每次 effect 触发）
      if (!shouldRefresh) {
        const stored = await storage.getString('cachedfeeds');
        if (stored) {
          cachedData = JSON.parse(stored);
          setFeeds(cachedData); // 直接展示缓存，不拼接
        }
      }

      // 2️⃣ 无论是否有缓存，都发起网络请求（支持强制刷新）
      const response = await fetch(`http://localhost:3000/feeds/${page}`);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const newData = await response.json();

      // 3️⃣ 成功后写入新缓存，覆盖旧数据
      await storage.set('cachedfeeds', JSON.stringify(newData));
      setFeeds(newData); // ✅ 替换而非追加，确保数据一致性

    } catch (err) {
      setError(err.message);
      // 若网络失败且有缓存，保留当前 feeds；否则维持空数组或 fallback
      if (!feeds.length && !shouldRefresh) {
        console.warn('No cache available and network failed.');
      }
    } finally {
      setLoading(false);
    }
  };

  // ✅ 关键：useEffect 仅依赖 page，避免因状态变更自触发
  useEffect(() => {
    fetchFeeds();
  }, [page]);

  // 可选：提供手动刷新入口
  const handleRefresh = () => {
    fetchFeeds(true);
  };

  return (
    <div>
      <button onclick="{handleRefresh}" disabled>
        {loading ? 'Refreshing...' : '? Refresh'}
      </button>
      {error && <p style="{{" color:>Error: {error}</p>}
      {feeds.map((feed) => (
        <div key="{feed.id}">{feed.title}</div>
      ))}
    </div>
  );
};

export default FeedList;

⚠️ 关键修复点说明

移除 cached 状态：它不是 UI 驱动的状态，而是流程控制标志，用函数参数 shouldRefresh 替代更清晰、无副作用。
useEffect 依赖精简：仅监听 page，确保分页变化才重新拉取，彻底杜绝因 setCached 引发的循环。
缓存读写语义明确：
- 读：仅在初始化阶段（shouldRefresh === false）尝试加载，避免重复解析；
- 写：每次 API 成功后无条件覆盖旧缓存，保证本地存储永远是最新的快照。
setFeeds(newData) 而非 setFeeds(prev => [...prev, ...newData])：避免首次加载时缓存 + API 数据双重渲染，也防止分页场景下数据错乱。