我正在尝试将React Toolkit应用程序集成到项目中。但是,我收到以下错误。
错误:无效的挂接调用。只能在函数组件的主体内部调用挂接。以下原因之一可能会导致这种情况:
1.您可能有不匹配的React和呈现器版本(例如React DOM)
1.你可能违反了钩子的规则
1.您可能在同一个应用中有多个React副本有关如何调试和修复此问题的提示,请参阅https://reactjs.org/link/invalid-hook-call。
store.js
import { configureStore } from "@reduxjs/toolkit";
export const store = configureStore({
reducer: {},
})
index.js
ReactDOM.render(
<EventTemplateProvider>
<AuthState>
<SetStripeLayout>
<EventState>
<TicketState>
<AlertState>
<Provider store={store}> <===== Provider
<BrowserRouter>
<Suspense fallback={<Spinner />}>
<Switch>
<Route
exact
path="/"
render={(props) => <App {...props} />}
/>
<PrivateRoute
path="/dashboard"
render={(props) => <Dashboard {...props} />}
/>
<PrivateRoute
path="/template"
render={(props) => <EventTemplate {...props} />}
/>
<PrivateRoute
path="/events"
render={(props) => <Events {...props} />}
/>
<AdminRoute
path="/admin"
render={(props) => <AdminLayout {...props} />}
/>
<Route
path="/readmore/:id"
render={(props) => <VirtualEventReadMore {...props} />}
/>
<Route
path="/*"
render={(props) => <Error404 {...props} />}
/>
<Redirect from="/" to="/" />
</Switch>
</Suspense>
</BrowserRouter>
</Provider>
</AlertState>
</TicketState>
</EventState>
</SetStripeLayout>
</AuthState>
</EventTemplateProvider>,
document.getElementById("root")
);
我没有开始为Redux编写任何代码,当我删除Provider标记时,应用程序可以工作。
有人能告诉我为什么它会裂开吗?
先谢谢你。
修改的索引. js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
ReactDOM.render(
<Provider store={store}>
<h1>Hello </h1>
</Provider>
, document.getElementById('root'));
1条答案
按热度按时间rsaldnfx1#
检查Packakage.json文件是否安装了模块。确保您已经安装了这些包:- npm i @reduxjs/toolkit npm i react-redux