RTK Query非Hook场景下API数据获取失败问题求助

1. 检查API切片的transformResponse配置 #

如果你的API切片定义了transformResponse，确认它正确提取了API返回的真实数据，而非错误返回空数组。比如：

// 错误示例：错误丢弃了响应数据
transformResponse: (response) => []

// 正确示例：根据API实际返回结构提取数据
transformResponse: (response) => response.data.results // 假设API返回结构为 { data: { results: [...] } }

2. 验证store中API状态的读取路径 #

RTK Query的状态默认存储在api下，对应你的API切片配置的reducerPath。确认读取路径完全匹配：

// 假设store中API切片的reducerPath为'actorApi'，查询名为'searchActors'
const state = store.getState();
// 正确读取路径
const actorData = state.actorApi.queries.searchActors?.data;

若reducerPath配置错误，会导致无法定位到正确的缓存数据。

3. 确认查询触发与数据获取的时机 #

非Hook模式下，需通过dispatch触发查询并等待请求完成，避免在请求pending状态时读取空数据：

// 正确触发并获取数据的示例
const fetchActors = async () => {
  const queryPromise = store.dispatch(actorApi.endpoints.searchActors.initiate('tom'));
  // 等待查询完成，获取原始响应数据
  const result = await queryPromise.unwrap();
  console.log(result); // 此处应返回API真实响应
  // 取消订阅避免内存泄漏
  queryPromise.unsubscribe();
};

4. 检查查询缓存的key匹配性 #

RTK Query会根据查询参数生成唯一缓存key，若参数传递错误或不匹配，会读取到旧的空缓存。确认每次触发查询时参数正确，且读取状态时对应正确的缓存条目。

5. 核对API响应结构与预期是否一致 #

在浏览器Network面板中查看API返回的原始结构，确认它和你在transformResponse或状态读取时的假设一致。比如API实际返回{ results: [...] }，但你错误读取state.actorApi.queries.searchActors.data.data，会导致获取到空值或undefined。

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