使用 React RTK 查询 createApi 时必须在 React 函数组件中调用 React Hooks

Question

我正在使用 React RTK 查询创建 2 个端点

export const countryApi = createApi({
    reducerPath: "countryApi",
    baseQuery: fetchBaseQuery({ baseUrl: "https://restcountries.com/v3.1/" }),
    endpoints: (builder) => ({
    getCountries: builder.query({
    query: () => `all/`
    }),
   getCountryByName: builder.query({
    query: (name) => `name/${name}`
    })
  })
});

然后我需要显示带有条件的结果，如果搜索输入的状态发生变化，我调用第二个端点，否则我使用第一个端点来显示所有国家/地区列表

// country search state
const [search, setSearch] = useState("");
let countryData;
countryData =
  search === ""
    ? useGetCountriesQuery().data
    : useGetCountryByNameQuery(search,{skip: search ===""}).data;

但是我得到一个错误 enter image description here

Answer 1

你不能有条件地调用钩子，这违反了the rules of hooks。

当渲染函数运行时，每次都必须以相同的顺序调用挂钩。通过拥有那个三元组，这不能保证发生：

countryData =
  search === ""
    ? useGetCountriesQuery().data
    : useGetCountryByNameQuery(search,{skip: search ===""}).data;

您可以在一个渲染周期中调用 useGetCountriesQuery，在另一个渲染周期中调用 useGetCountryByNameQuery。

解决此问题的一种方法是无条件调用两个挂钩，但 skip 它们 vice-versa。或者，如果可能，将两个查询合并为一个钩子：

const countries = useGetCountriesQuery({ skip: search !== '' })
const countriesByName = useGetCountryByNameQuery(search,{skip: search ===""})

const countryData = search === "" ? countries.data : countriesByName.data

使用 React RTK 查询 createApi 时必须在 React 函数组件中调用 React Hooks

React Hooks must be called in a React function component when using React RTK query createApi

reactjs

react-query