如何在RTK Query中用上一次查询数据作为同查询下一次调用参数？

你原来的写法报错是因为data是useUsersQuery的返回值，组件首次渲染时data还未定义，没法直接作为参数传入同一个hook。下面是几种更优雅的实现方式：

方案1：本地状态维护cursor，自动/手动触发查询 #

用useState存当前的token/cursor，每次查询返回新数据后更新状态，RTK Query会自动根据参数变化重新发起请求：

import { useState, useEffect } from 'react';
import { useUsersQuery } from './your-api-slice';

const UsersComponent = () => {
  // 初始token设为null，对应首次查询的默认参数
  const [currentToken, setCurrentToken] = useState(null);
  const { data } = useUsersQuery({ someToken: currentToken });

  // 如果需要自动加载下一页，数据返回后更新token
  useEffect(() => {
    if (data?.someToken) {
      setCurrentToken(data.someToken);
    }
  }, [data]);

  // 如果是手动加载，写个点击事件
  const loadNextPage = () => {
    if (data?.someToken) {
      setCurrentToken(data.someToken);
    }
  };

  return (
    <div>
      {/* 渲染用户列表 */}
      <button onClick={loadNextPage}>加载更多</button>
    </div>
  );
};

方案2：直接从RTK Query缓存读取上一次的token #

RTK Query的缓存可以通过useSelector直接访问，不需要额外维护本地状态：

import { useSelector } from 'react-redux';
import { useUsersQuery, usersApi } from './your-api-slice';

const UsersComponent = () => {
  // 从缓存中获取上一次查询返回的token
  const lastToken = useSelector(state => {
    // 这里的参数要和首次查询的参数一致，才能找到对应的缓存条目
    const cacheEntry = usersApi.endpoints.getUsers.select({ someToken: null })(state);
    return cacheEntry.data?.someToken;
  });

  // 用缓存里的lastToken作为参数，首次查询时lastToken为null，走初始逻辑
  const { data } = useUsersQuery({ someToken: lastToken });

  return <div>{/* 渲染内容 */}</div>;
};

方案3：优化useLazyQuery的写法 #

如果坚持用useLazyQuery，可以把逻辑拆分得更清晰，避免直接依赖未初始化的data：

import { useState, useEffect } from 'react';
import { useLazyUsersQuery } from './your-api-slice';

const UsersComponent = () => {
  const [triggerQuery, { data }] = useLazyUsersQuery();
  const [currentToken, setCurrentToken] = useState(null);

  // 首次加载
  useEffect(() => {
    triggerQuery({ someToken: currentToken });
  }, []);

  // 手动触发下一页
  const loadNext = () => {
    if (data?.someToken) {
      setCurrentToken(data.someToken);
      triggerQuery({ someToken: data.someToken });
    }
  };

  return (
    <div>
      {/* 渲染列表 */}
      <button onClick={loadNext}>加载更多</button>
    </div>
  );
};

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