如何使用RTK Query从API获取指定字段数据？

步骤1：定义精准的类型（mission.model.ts） #

先明确你需要的字段类型，避免冗余：

export interface Mission {
  flight_number: number;
  mission_name: string;
  upcoming: boolean;
  launch_date_utc: string;
  rocket_name: string;
  launch_success: boolean | null; // 未发射的任务该字段为null
  mission_patch_small: string | null; // 部分任务可能没有补丁图
}

步骤2：在API切片中转换响应数据（services/missionsApi.tsx） #

利用RTK Query的transformResponse钩子，直接在请求层提取所需字段，避免组件处理冗余逻辑：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { Mission } from '../mission.model';

export const missionsApi = createApi({
  reducerPath: 'missionsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.spacexdata.com/v3/' }),
  endpoints: (builder) => ({
    getMissions: builder.query<Mission[], void>({
      query: () => 'launches',
      transformResponse: (rawLaunches: any[]) => {
        return rawLaunches.map(launch => ({
          flight_number: launch.flight_number,
          mission_name: launch.mission_name,
          upcoming: launch.upcoming,
          launch_date_utc: launch.launch_date_utc,
          rocket_name: launch.rocket.rocket_name, // 注意rocket_name在rocket嵌套对象内
          launch_success: launch.launch_success,
          mission_patch_small: launch.links.mission_patch_small // 补丁图链接在links对象内
        }));
      }
    })
  })
});

export const { useGetMissionsQuery } = missionsApi;

步骤3：确保Store正确配置（store.ts） #

确认API切片已注册到Store中：

import { configureStore } from '@reduxjs/toolkit';
import { missionsApi } from './services/missionsApi';

export const store = configureStore({
  reducer: {
    [missionsApi.reducerPath]: missionsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(missionsApi.middleware),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

步骤4：组件中直接使用处理后的数据（App.tsx） #

现在useGetMissionsQuery返回的data就是你需要的精简字段集合：

import { useGetMissionsQuery } from './services/missionsApi';
import { Mission } from './mission.model';

function App() {
  const { data: missions, error, isLoading } = useGetMissionsQuery();

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{JSON.stringify(error)}</div>;

  return (
    <div className="App">
      <h1>SpaceX任务列表</h1>
      <ul>
        {missions?.map((mission) => (
          <li key={mission.flight_number}>
            <h2>{mission.mission_name} #{mission.flight_number}</h2>
            <p>状态：{mission.upcoming ? '即将发射' : mission.launch_success ? '发射成功' : '发射失败'}</p>
            <p>UTC发射时间：{mission.launch_date_utc}</p>
            <p>火箭型号：{mission.rocket_name}</p>
            {mission.mission_patch_small && <img src={mission.mission_patch_small} alt={`${mission.mission_name} 任务补丁`} />}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

关键注意点 #

• 注意API返回的嵌套字段：rocket_name在rocket对象下，mission_patch_small在links对象下，别写错路径
• 处理可能的null值：未发射的任务launch_success为null，部分任务没有补丁图，组件中要做判断避免报错

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