使用Shazam API时出现useTopChartsQuery不是函数的错误求助

以下是针对该错误的排查和修复步骤：

1. 确认Redux Store已正确配置RTK Query切片 #

RTK Query生成的hooks依赖正确的Store配置才能正常工作，你需要确保：

• 将shazamCoreApi的reducer添加到Store的reducer配置中
• 注入RTK Query的中间件
• 调用setupListeners以支持缓存和自动刷新

示例Store配置代码（通常在redux/store.js）：

import { configureStore } from '@reduxjs/toolkit';
import { shazamCoreApi } from './services/shazamCore';
import { setupListeners } from '@reduxjs/toolkit/query/react';

export const store = configureStore({
  reducer: {
    // 必须添加RTK Query的reducer
    [shazamCoreApi.reducerPath]: shazamCoreApi.reducer,
  },
  // 注入RTK Query的中间件，处理缓存、失效等逻辑
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(shazamCoreApi.middleware),
});

// 设置监听，支持refetchOnFocus等功能
setupListeners(store.dispatch);

同时要确保你的根组件被Provider包裹：

import { Provider } from 'react-redux';
import { store } from './redux/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

2. 验证RTK Query版本一致性 #

确保@reduxjs/toolkit和其query/react子包版本完全一致，版本不匹配可能导致hooks生成异常：

• 执行命令查看版本：

  npm list @reduxjs/toolkit
  

• 若版本不一致，重新安装最新版本：

  npm install @reduxjs/toolkit@latest
  

3. 再次核对导出/导入的正确性 #

虽然你提到已检查路径，但仍需确认：

• shazamCore.js中export const { useTopChartsQuery } = shazamCoreApi;的拼写完全正确
• Discover.jsx中导入路径../redux/services/shazamCore指向的文件确实是shazamCore.js（注意文件名大小写，部分操作系统区分大小写）

4. 确认Hook在React组件内部调用 #

你的Discover组件中调用useTopChartsQuery的位置是正确的，但如果后续代码调整，要确保所有RTK Query的hooks都只能在React函数组件或自定义Hook内部调用，不能在普通函数、类组件或组件外部执行。

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