为什么Redux Provider标记会破坏整个应用程序

vsnjm48y  于 2023-02-08  发布在  其他
关注(0)|答案(1)|浏览(131)

我正在尝试将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'));
rsaldnfx

rsaldnfx1#

检查Packakage.json文件是否安装了模块。确保您已经安装了这些包:- npm i @reduxjs/toolkit npm i react-redux

相关问题