0

我正在阅读RTK Query 快速入门教程，并在运行时尝试在 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)
4

1 回答 1

1

你那里有一个错字。enedpoints而不是endpoints.

于 2021-09-08T23:08:23.000 回答