因RTK Query自动生成hooks导入错误致应用失败求助

问题场景 #

在React项目中尝试用RTK Query替换Thunk API构建待办事项应用时，遇到RTK Query自动生成的hooks（如useGetTodosQuery）导入错误，导致应用无法正常运行。相关代码实现如下：

RTK Query service: #

export const apiSlice = createApi({
  reducerPath: "apiSlice",
  tagTypes: ["Todos"],
  baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:3500/" }),
  endpoints: (builder) => ({
    getTodos: builder.query({
      query: () => "todos",
      providesTags: ["Todos"],
    }),
  }),
});

export const { useGetTodosQuery } = apiSlice;

store.js: #

import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { apiSlice } from "./services/api";

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

setupListeners(store.dispatch);

index.js #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { store } from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

TodoList.js component: #

import React, { useState } from "react";
import { useGetTodosQuery } from "../services/api";
import { Todo } from "./Todo";

export const TodoList = () => {
  const { data: todos, isLoading } = useGetTodosQuery();
  //   const [todos, setTodos] = useState([]);

  return (
    <div>
      {todos?.map((todo) => (
        <Todo title={todo.title} key={todo.id} />
      ))}
    </div>
  );
};

Todo.jsx component: #

export const Todo = ({ title }) => {
  return (
    <div className="todo">
      <p>{title}</p>
    </div>
  );
};

解决步骤 #

• 核对文件导入路径：确认TodoList.js中import { useGetTodosQuery } from "../services/api";的路径与实际项目文件结构完全匹配。比如检查services文件夹下的API文件是否名为api.js，如果是apiSlice.js则需要修改导入路径为../services/apiSlice。

• 更新依赖版本：确保@reduxjs/toolkit和react-redux为最新稳定版，RTK Query对React版本要求不低于16.8.0（支持hooks）。执行以下命令更新：

  npm install @reduxjs/toolkit@latest react-redux@latest
  

• 验证store配置正确性：确认store.js中已正确导入apiSlice并注册其reducer和middleware，同时检查apiSlice文件是否存在语法错误（比如括号、逗号遗漏）。

• 重启开发服务器：缓存问题可能导致导入异常，停止当前服务后重新执行npm start，清除开发服务器缓存。

• 排查语法错误：检查API切片文件中的代码语法，任何语法错误都会导致模块无法正常导出，进而引发hooks导入失败。

内容的提问来源于stack exchange，提问作者Bello Shehu