如何在RTK Query中保存同一端点多次请求的查询结果？

RTK Query默认会用最新请求结果覆盖同参数的缓存数据，所以要手动把每次返回的机票数据累加起来，具体可以这么做：

• 新增一个useState来存储所有请求到的机票数据
• 监听useGetTicketsQuery返回的data变化，每次拿到新数据就合并到累计列表里（记得去重避免重复机票）
• 最后基于累计的全量数据做排序和渲染

修改后的代码示例：

import { useState, useEffect } from 'react';
import { useGetTicketsQuery } from './your-api-slice'; // 替换成你的API切片路径

const TicketList = ({ searchID }) => {
  const [pollingInterval, setPollingInterval] = useState(1000);
  // 存储所有累计的机票数据
  const [allTickets, setAllTickets] = useState([]);

  const { data, isError, isLoading } = useGetTicketsQuery(
    searchID,
    { pollingInterval }
  );

  // 监听新数据，合并到累计列表
  useEffect(() => {
    if (data?.tickets) {
      // 去重逻辑：假设每个ticket有唯一id，过滤掉已经存在的机票
      const newTickets = data.tickets.filter(
        newTicket => !allTickets.some(existing => existing.id === newTicket.id)
      );
      setAllTickets(prev => [...prev, ...newTickets]);
    }
  }, [data, allTickets]);

  // 停止轮询逻辑保持不变
  useEffect(() => {
    if (data?.stop && pollingInterval !== 0) {
      setPollingInterval(0);
    }
  }, [data, pollingInterval]);

  // 对全量机票排序，示例按价格升序
  const sortedTickets = [...allTickets].sort((a, b) => a.price - b.price);

  if (isLoading) return <div>加载中...</div>;
  if (isError) return <div>请求出错</div>;

  return (
    <div>
      {sortedTickets.map(ticket => (
        <div key={ticket.id}>
          {/* 渲染机票信息，比如价格、航班号等 */}
          <p>价格：{ticket.price}</p>
          <p>航班：{ticket.flightNumber}</p>
        </div>
      ))}
    </div>
  );
};

export default TicketList;

关键点说明 #

• 数据累加：通过useEffect监听每次返回的data，提取新机票并合并到allTickets中
• 去重处理：避免同一机票被重复添加，这里假设机票有唯一id字段，你可以根据实际接口返回的唯一标识调整
• 排序渲染：基于累计的allTickets做排序，再渲染到页面上
• 轮停逻辑：保留你原来的停止轮询逻辑，当服务器返回stop时关闭轮询

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