代码此前运行正常,现遇‘Could not find "store"’错误,求明确错误诉求
错误解析与解决方案
错误的具体要求拆解
首先明确这个错误的核心诉求:
ConnectedRouterWithContext(这是react-admin内部依赖的路由相关Redux连接组件)需要通过React上下文访问Redux的store实例,但当前它找不到这个实例。你必须满足以下任一条件:
- 把根组件用Redux的
<Provider store={store}>包裹,让所有子组件都能通过上下文获取到store;- 如果你使用了自定义React Context传递store,需要在
connect方法的配置项中指定对应的Context Consumer,让ConnectedRouterWithContext能通过自定义Context拿到store。
为什么你的代码会触发这个错误?
正常情况下,react-admin的<Admin>组件内部已经会自动创建Redux store并包裹<Provider>,你的代码写法本身没问题。大概率是以下两个原因:
- 依赖版本不兼容:
react-admin、redux、react-redux、connected-react-router这些包的版本冲突,导致内部的路由组件无法正确识别上下文里的store; - 项目缓存/依赖安装异常:node_modules或锁文件的缓存导致依赖加载异常。
具体修复步骤
1. 修复依赖版本(最可能解决问题)
先卸载现有冲突依赖,再重新安装兼容的稳定版本:
# 卸载相关依赖 npm uninstall redux react-redux connected-react-router react-admin # 重新安装最新稳定兼容版 npm install react-admin redux react-redux connected-react-router
2. 手动显式创建并传递Store(兜底方案)
如果自动创建Store的方式失效,你可以手动创建Store并显式包裹Provider,确保上下文能正确传递:
修改你的App.js代码如下:
import React from 'react'; import { Admin, Resource, ShowGuesser, createStore } from 'react-admin'; import { Provider } from 'react-redux'; import jsonServerProvider from 'ra-data-json-server'; import { UserList } from './users' import { PostList, PostEdit, PostCreate, PostShow } from './post'; import { CommentList, CommentEdit, CommentCreate } from './Comments'; import NotFound from './NotFound'; import Dashboard from './Dashboard'; import authProvider from './authProvider'; import Menu from './Menu'; import theme from './theme'; import PostIcon from '@material-ui/icons/Book'; import UserIcon from '@material-ui/icons/Group'; import ChatBubbleIcon from '@material-ui/icons/ChatBubble'; const dataProvider = jsonServerProvider('http://jsonplaceholder.typicode.com'); // 手动创建Redux Store const store = createStore({ dataProvider, authProvider }); const App = () => ( {/* 用Provider包裹Admin,显式传递Store */} <Provider store={store}> <Admin title="My Custom Admin" dashboard={Dashboard} authProvider={authProvider} dataProvider={dataProvider} catchAll={NotFound} theme={theme} store={store} {/* 同时把Store传给Admin组件 */} > <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} icon={PostIcon} show={PostShow}/> <Resource name="users" list={UserList} icon={UserIcon}/> <Resource name="comments" list={CommentList} edit={CommentEdit} create={CommentCreate} icon={ChatBubbleIcon}/> </Admin> </Provider> ); export default App;
3. 清除缓存并重启项目
如果以上步骤还没解决,清除项目缓存后重新安装依赖:
# 删除依赖文件夹和锁文件 rm -rf node_modules package-lock.json # 重新安装依赖 npm install # 重启项目 npm start
内容的提问来源于stack exchange,提问作者Iman Jalali
相关产品推荐
相关产品推荐

