React Redux：带对象删除的数据获取竞态问题解决

这个竞态条件问题在React异步场景里真的太常见了！当自动轮询和手动请求同时发起时，旧请求结果覆盖新请求的情况确实头疼。我来给你几个经过项目验证的实用解决方案，你可以根据自己的项目规模和场景选择：

1. 使用AbortController取消未完成的请求 #

这是最直接的解决思路：每次发起新请求前，先取消掉之前还没完成的请求——不管它是自动轮询触发的还是手动触发的。这样就能确保只有最新的请求能完成并更新状态。

示例代码：

import { useState, useEffect } from 'react';

function DataList() {
  const [data, setData] = useState([]);
  let abortController = null;

  const fetchData = async () => {
    // 取消之前未完成的请求
    if (abortController) {
      abortController.abort();
    }
    abortController = new AbortController();
    
    try {
      const response = await fetch('/api/data', {
        signal: abortController.signal
      });
      const newData = await response.json();
      setData(newData);
    } catch (error) {
      // 忽略请求被取消的错误
      if (error.name !== 'AbortError') {
        console.error('数据获取失败:', error);
      }
    }
  };

  // 自动轮询逻辑
  useEffect(() => {
    fetchData();
    const intervalId = setInterval(fetchData, 5000);
    
    // 组件卸载时清理：取消请求+清除定时器
    return () => {
      if (abortController) abortController.abort();
      clearInterval(intervalId);
    };
  }, []);

  // 删除操作
  const handleDelete = async (id) => {
    await fetch(`/api/data/${id}`, { method: 'DELETE' });
    // 删除后手动触发刷新
    fetchData();
  };

  return (
    <div>
      {/* 数据列表渲染 */}
      {data.map(item => (
        <div key={item.id}>
          {item.name}
          <button onClick={() => handleDelete(item.id)}>删除</button>
        </div>
      ))}
    </div>
  );
}

这个方案的优势是从根源上阻止了旧请求的完成，不会留下“残留”的异步操作，逻辑清晰易懂。

2. 给请求添加时间戳校验 #

如果你的场景不适合取消请求（比如某些旧浏览器不支持AbortController，或者第三方API不允许取消），可以给每个请求标记时间戳，只处理最新的请求结果。

示例代码：

import { useState, useEffect, useRef } from 'react';

function DataList() {
  const [data, setData] = useState([]);
  // 用useRef保存最新请求的时间戳
  const latestRequestTimestamp = useRef(Date.now());

  const fetchData = async () => {
    const requestTimestamp = Date.now();
    try {
      const response = await fetch('/api/data');
      const newData = await response.json();
      
      // 只有当前请求是最新的，才更新状态
      if (requestTimestamp >= latestRequestTimestamp.current) {
        latestRequestTimestamp.current = requestTimestamp;
        setData(newData);
      }
    } catch (error) {
      console.error('数据获取失败:', error);
    }
  };

  // 自动轮询
  useEffect(() => {
    fetchData();
    const intervalId = setInterval(fetchData, 5000);
    return () => clearInterval(intervalId);
  }, []);

  const handleDelete = async (id) => {
    await fetch(`/api/data/${id}`, { method: 'DELETE' });
    fetchData();
  };

  return (
    {/* 渲染内容同上 */}
  );
}

这个方案不需要修改请求本身，只是在结果返回时做校验，兼容性更好，适合不能取消请求的场景。

3. 手动操作期间暂停自动轮询 #

另一种思路是：在执行删除这类手动操作时，暂时停止自动轮询，等手动操作和刷新完成后再恢复轮询。这样从根本上避免了同时发起多个请求的可能。

示例代码：

import { useState, useEffect } from 'react';

function DataList() {
  const [data, setData] = useState([]);
  const [isPollingPaused, setIsPollingPaused] = useState(false);

  const fetchData = async () => {
    try {
      const response = await fetch('/api/data');
      const newData = await response.json();
      setData(newData);
    } catch (error) {
      console.error('数据获取失败:', error);
    }
  };

  // 自动轮询逻辑：根据isPollingPaused状态决定是否执行
  useEffect(() => {
    if (isPollingPaused) return;
    
    fetchData();
    const intervalId = setInterval(fetchData, 5000);
    return () => clearInterval(intervalId);
  }, [isPollingPaused]);

  const handleDelete = async (id) => {
    // 暂停轮询
    setIsPollingPaused(true);
    try {
      await fetch(`/api/data/${id}`, { method: 'DELETE' });
      await fetchData(); // 手动刷新数据
    } finally {
      // 不管操作成功失败，都恢复轮询
      setIsPollingPaused(false);
    }
  };

  return (
    {/* 渲染内容同上 */}
  );
}

这个方案逻辑非常直观，适合操作不频繁的场景，能完全避免竞态条件的发生。

4. 使用状态管理库的内置解决方案 #

如果你的项目已经在使用状态管理库，比如Redux Toolkit的RTK Query，它内置了处理竞态条件的机制，完全不用手动写逻辑。RTK Query会自动跟踪请求的状态，确保只有最新的请求结果会更新缓存，而且在执行删除等修改操作后，会自动标记相关数据为过时并触发重新获取。

示例代码：

首先定义API Slice：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const dataApi = createApi({
  reducerPath: 'dataApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getData: builder.query({
      query: () => 'data',
      // 配置自动轮询
      refetchInterval: 5000,
      // 标记数据标签，用于失效刷新
      providesTags: ['Data'],
    }),
    deleteData: builder.mutation({
      query: (id) => ({
        url: `data/${id}`,
        method: 'DELETE',
      }),
      // 删除后标记Data标签失效，自动触发getData重新获取
      invalidatesTags: ['Data'],
    }),
  }),
  tagTypes: ['Data'],
});

export const { useGetDataQuery, useDeleteDataMutation } = dataApi;

然后在组件中使用：

import { useGetDataQuery, useDeleteDataMutation } from './dataApi';

function DataList() {
  // 获取数据，RTK Query自动处理轮询和缓存
  const { data = [], isLoading } = useGetDataQuery();
  const [deleteData] = useDeleteDataMutation();

  const handleDelete = async (id) => {
    // 执行删除，RTK Query会自动触发数据刷新
    await deleteData(id);
  };

  if (isLoading) return <div>加载中...</div>;

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          {item.name}
          <button onClick={() => handleDelete(item.id)}>删除</button>
        </div>
      ))}
    </div>
  );
}

这个方案适合中大型项目，能彻底解放手动处理异步请求的负担，同时还能享受到缓存、自动重试等额外功能。

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