使用RTK Query报错：Cannot read properties of undefined (reading 'usersApi')

错误原因分析 #

报错核心是循环引用、导入路径混乱及组件渲染逻辑缺失：

1. store.js从./index导入usersApi，而index.js大概率同时导入了store，导致模块加载时循环依赖，usersApi未完成初始化就被调用。
2. ShowData组件的map函数缺少返回值，无法渲染列表项。
3. 未用Redux的Provider包裹应用，导致store未与React关联，DevTools无法捕获状态数据。

分步解决 #

1. 修复循环引用问题 #

修改store.js的导入语句，直接从usersApi.js导入目标模块：

// store.js
import {configureStore} from "@reduxjs/toolkit"
// 替换原导入路径，避免循环引用
import { usersApi } from "./usersApi"

export const store = configureStore({
    reducer : {
        [usersApi.reducerPath] : usersApi.reducer,
    }, 
    middleware: (getDefMiddleware) => getDefMiddleware().concat(usersApi.middleware)
})

2. 规范Redux模块的导出入口 #

在redux目录下的index.js中统一导出store和RTK Query的hooks，确保组件导入路径正确：

// redux/index.js
export { store } from './store';
export { useGetUsersQuery } from './usersApi';

3. 修复组件渲染逻辑 #

给ShowData组件的map函数添加返回值，确保列表项正常渲染：

const ShowData = ({data}) => {
  return (
    <ul>
      // 改为带返回值的箭头函数写法
      {data.map(user => (
        <li key={user.id}>{`name: ${user.name}`}</li>
      ))}
    </ul>
  )
}

4. 将Redux Store注入React应用 #

在项目根目录的index.js中，用Provider组件包裹App，让整个应用能访问Redux状态：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './redux';
import App from './App';

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

验证修复 #

1. 重启开发服务器，确认控制台报错消失。
2. 打开Redux DevTools，可看到usersApi的状态数据。
3. 页面正常加载并渲染用户列表。

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