我正在阅读RTK 查询快速入门教程,并在运行时在 javascript 中尝试它,结果显示了此错误。
相应站点的示例同时显示了 Typescript 和 Javascript 代码,但沙箱示例是 Typescript 中的。
src/app/services/pokemon.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const pokemonApi = createApi({
reducerPath:'pokemonApi',
baseQuery: fetchBaseQuery({
baseUrl: 'https://pokeapi.co/api/v2'
}),
enedpoints: (builder)=>({
getPokemonByName: builder.query({
query:(name)=>`pokemon/${name}`,
}),
}),
});
export const { useGetPokemonByNameQuery } = pokemonApi
src/app.jsx
import { useGetPokemonByNameQuery } from './services/pokemon';
export default function App(){
const { data, error, isLoading } = useGetPokemonByNameQuery('bulbasaur');
return (
<div className="App">
{error ? (
<>Oh no, there was an error</>
) : isLoading ? (
<>Loading...</>
) : data ? (
<>
<h3>{data.species.name}</h3>
<img src={data.sprites.front_shiny} alt={data.species.name} />
</>
) : null}
</div>
);
}
src/app/store.js
import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/dist/query";
import counterReducer from "../features/counter/counterSlice";
import { pokemonApi } from "../services/pokemon";
export const store = configureStore({
reducer:{
counter: counterReducer,
[pokemonApi.reducerPath]: pokemonApi.reducer,
},
middleware: (getDefaultMiddleware)=>
getDefaultMiddleware().concat(pokemonApi.middleware),
});
// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
setupListeners(store.dispatch)
如果我们没有在 createApi 中指定端点“inject.endpoints 不是函数”,有时会出现此错误。
export const ApiSlice = createApi({
reducerPath: 'api',
baseQuery: axiosBaseQuery,
endpoints: () => ({}) // <= This line is Mandatory even if empty
});
你那里有错字。
enedpoints
而不是endpoints
。
有同样的问题;
我打错了
endpoints