RTK Query报错：useImageFeedQuery不是函数或返回值不可迭代

我在使用RTK Query发送GET请求时遇到了问题，浏览器报错：Uncaught TypeError: useImageFeedQuery is not a function or its return value is not iterable.

以下是我的配置代码：

api.ts（基础API配置） #

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

export const api = createApi({
  reducerPath: "feedApi",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  tagTypes: [],
  endpoints: () => ({}),
});

feedApi.ts（端点配置） #

import { api } from "./api/api";

type feedProps = {
  type: [];
  items: {
    type: string;
    format: string;
  };
  title: string;
};

export const feedApi = api.injectEndpoints({
  endpoints: (build) => ({
    imageFeed: build.query<feedProps, string>({
      query: (prompt) => ({
        url: `http://localhost:3001/image-feed?prompt=${prompt}`,
      }),
    }),
    videoFeed: build.query<feedProps, string>({
      query: (prompt) => ({
        url: `http://localhost:3001/video-feed?prompt=${prompt}`,
      }),
    }),
  }),
});

export const { useImageFeedQuery, useVideoFeedQuery } = feedApi;

form.tsx（组件代码） #

import { useEffect, FC } from "react";
import { Controller, useForm } from "react-hook-form";
import Textarea from "../Textarea/Textarea";
import { yupResolver } from "@hookform/resolvers/yup";

import SubmitIcon from "../../assets/icons/right-arrow.svg";
import { StyledFormContainer } from "./Form.styled";
import { validationSchema } from "./validationSchema";
import VideoPlayer from "../VideoPlayer/VideoPlayer";
import Card from "../Card";
import { image, videoJsOptions } from "../../features/Chat/constants";

import { useImageFeedQuery} from "../../app/services/feedApi";


interface FormProps {
  formType: string | undefined | null;
}

type FormValues = {
  prompt: string;
};

const Form: FC<FormProps> = ({ formType }) => {
  const [imageFeed, { isSuccess }] = useImageFeedQuery();

  const {
    handleSubmit,
    control,
    reset,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: {
      prompt: "",
    },
    mode: "onBlur",
    resolver: yupResolver(validationSchema),
  });

  useEffect(() => reset(), [reset, formType]);

  const onSubmit = ({ prompt }: FormValues) => {
    console.log(prompt);
    imageFeed(prompt);
  };

  return (
    <StyledFormContainer>
      <div className="media-container">
        {formType === "video" ? (
          <VideoPlayer options={videoJsOptions} />
        ) : (
          <div className="images-feed">
            <Card url={image} />
          </div>
        )}
      </div>
      <form
        onSubmit={handleSubmit(onSubmit)}
        className={`${errors.prompt?.message ? "error" : ""}`}
      >
        <div className="caption-container">
          <Controller
            control={control}
            name="prompt"
            render={({ field: { onChange, value } }) => (
              <Textarea
                onChange={onChange}
                value={value}
                error={errors.prompt?.message}
              />
            )}
          />
        </div>
         
        <div className="btn-container">
          <button>
            <img
              src={SubmitIcon}
              width={20}
              height={20}
              alt="submit"
            />
          </button>
        </div>
      </form>
    </StyledFormContainer>
   );
};

export default Form;

解决建议 #

1. 修正请求触发方式（核心问题） #

RTK Query的useQuery钩子不会返回可调用函数，你不能像imageFeed(prompt)这样调用它。如果需要手动在表单提交时触发请求，应该使用useLazyQuery：

步骤1：导出Lazy钩子

在feedApi.ts中添加导出：

export const { useLazyImageFeedQuery, useLazyVideoFeedQuery } = feedApi;

步骤2：替换组件中的钩子使用

在form.tsx中修改：

// 导入替换为Lazy钩子
import { useLazyImageFeedQuery } from "../../app/services/feedApi";

// 组件内部替换为
const [triggerImageFeed, { isSuccess, data }] = useLazyImageFeedQuery();

const onSubmit = ({ prompt }: FormValues) => {
    console.log(prompt);
    triggerImageFeed(prompt); // 调用触发函数发送请求
};

2. 统一请求地址配置 #

你的基础API配置了baseUrl: "/api"，但端点里写了完整的http://localhost:3001/image-feed，会导致地址拼接异常。推荐两种统一方式：

• 方式一：修改基础baseUrl

  // api.ts中
  baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:3001" }),
  // feedApi.ts中端点路径改为
  url: `/image-feed?prompt=${prompt}`
  

• 方式二：保留/api并配置代理
  确保项目的代理配置（比如Vite或Create React App的proxy）将/api请求转发到http://localhost:3001，端点路径改为：

  url: `/image-feed?prompt=${prompt}`
  

3. 规范类型定义 #

feedProps中的type: []定义不明确，建议改为具体类型，比如：

type feedProps = {
  type: string[]; // 或其他符合接口返回的具体类型
  items: {
    type: string;
    format: string;
  };
  title: string;
};

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