React应用中API响应延迟时的实时收藏状态同步问题

针对你遇到的API响应延迟导致收藏状态不一致的问题，可以通过以下几种方案解决：

1. 以本地乐观更新状态为可信源，忽略旧API返回数据 #

核心思路是：收藏操作触发时先更新本地状态保证界面实时反馈，后续API返回的旧数据直接丢弃，仅在API操作失败时回滚本地状态。这样避免了旧数据覆盖正确的界面状态。

示例代码：

import { useState, useEffect } from 'react';

function FavoriteCards() {
  const [favoriteIds, setFavoriteIds] = useState([]);
  
  // 初始加载时获取收藏ID列表
  useEffect(() => {
    const fetchFavorites = async () => {
      const ids = await api.getFavoriteIds();
      setFavoriteIds(ids);
    };
    fetchFavorites();
  }, []);

  const toggleFavorite = async (itemId) => {
    // 先执行乐观更新，更新本地状态
    const isCurrentlyFavorite = favoriteIds.includes(itemId);
    const updatedFavorites = isCurrentlyFavorite
      ? favoriteIds.filter(id => id !== itemId)
      : [...favoriteIds, itemId];
    setFavoriteIds(updatedFavorites);

    try {
      // 调用Portal的收藏/取消收藏API
      await api.toggleFavorite(itemId);
      // 若需同步其他端变更，可在此处重新获取，但需判断数据是否为最新
      const latestFavorites = await api.getFavoriteIds();
      // 仅当返回数据与本地状态不一致时更新（处理跨端变更）
      if (JSON.stringify(latestFavorites) !== JSON.stringify(updatedFavorites)) {
        setFavoriteIds(latestFavorites);
      }
    } catch (err) {
      // API操作失败，回滚本地状态
      setFavoriteIds(favoriteIds);
      alert('收藏操作失败，请重试');
    }
  };

  // 渲染卡片逻辑...
}

2. 基于操作API的回调触发数据刷新，而非立即查询 #

不要在触发收藏操作后立刻调用getFavoriteIds，而是等toggleFavorite的API响应成功后再发起查询。因为Portal端已显示状态变化，说明toggleFavoriteAPI已执行成功，此时再查询能最大程度避免拿到旧缓存数据。

3. 引入版本/时间戳机制过滤旧数据 #

如果后端API支持，请求收藏ID列表时带上上次查询的时间戳，让后端仅返回该时间点之后的变更数据；或者让后端返回数据时附带一个版本号，本地维护当前状态的版本，仅接受版本号更高的API返回数据，直接丢弃旧版本数据。

若后端不支持该特性，可在本地维护操作序列的版本标识，比如每次执行收藏操作时递增版本号，当API返回数据时，若其对应的版本低于本地当前版本，则不更新状态。

4. 使用数据缓存库处理一致性（推荐） #

借助React Query、SWR这类专门处理数据缓存与同步的库，它们内置了乐观更新、缓存失效、自动重试等机制，能更优雅地解决API延迟问题。

以React Query为例：

import { useQuery, useMutation, QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient();

function FavoriteCards() {
  // 缓存并获取收藏ID列表
  const { data: favoriteIds = [] } = useQuery({
    queryKey: ['favoriteIds'],
    queryFn: api.getFavoriteIds
  });

  // 定义收藏操作的mutation
  const toggleFavoriteMutation = useMutation({
    mutationFn: api.toggleFavorite,
    // 乐观更新缓存
    onMutate: async (itemId) => {
      // 暂停当前查询，避免旧数据覆盖
      await queryClient.cancelQueries({ queryKey: ['favoriteIds'] });
      // 获取当前缓存数据
      const previousFavorites = queryClient.getQueryData(['favoriteIds']);
      // 更新缓存
      queryClient.setQueryData(['favoriteIds'], (old) => {
        if (!old) return [];
        return old.includes(itemId)
          ? old.filter(id => id !== itemId)
          : [...old, itemId];
      });
      // 返回回滚所需数据
      return { previousFavorites };
    },
    // 操作失败回滚缓存
    onError: (err, itemId, context) => {
      queryClient.setQueryData(['favoriteIds'], context.previousFavorites);
    },
    // 操作成功后重新验证缓存，确保数据最新
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['favoriteIds'] });
    }
  });

  const toggleFavorite = (itemId) => {
    toggleFavoriteMutation.mutate(itemId);
  };

  // 渲染卡片逻辑...
}

这类库会自动处理缓存的优先级，即使API返回旧数据，也不会覆盖已经通过乐观更新修正的缓存状态，同时能在合适时机重新获取最新数据。

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