reactjs - 我正在将我的反应与 firebase 联系起来并收到此错误。错误：无效的挂钩调用

Question

/* 我将我的 react 与 firebase 连接起来并得到这个错误 Error: Invalid hook call。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用

If i comment the (ReactReduxFirebaseProvider) it runs but still not working data isn't going into my firebase collection.
*/
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import {createStore,applyMiddleware,compose} from "redux";
    import rootReducer from './store/reducers/rootReducer';
    import { Provider } from "react-redux";
    import thunk from "redux-thunk";
    import { getFirebase, ReactReduxFirebaseProvider } from "react-redux-firebase";
    import {
      getFirestore,
      reduxFirestore,
      createFirestoreInstance
    }
      from "redux-firestore";
    import fbConfig from "./config/fbConfig";
    import firebase from "firebase/app";
    
    const store = createStore(
      rootReducer,
      compose(
        applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
        reduxFirestore(firebase,fbConfig)
      )
    );
    
    const config = {
      userProfile: "students",
      useFirestoreForProfile: true,
    };
    
    const rrfProps = {
      firebase,
      config,
      dispatch: store.dispatch,
      createFirestoreInstance,
    };
    
    ReactDOM.render(
      <Provider store={store}>
        <ReactReduxFirebaseProvider {...rrfProps}>
          <App />
        </ReactReduxFirebaseProvider>
      </Provider>,
      document.getElementById("root")
    );
    
    reportWebVitals();







// This is the APP Component code
import FeedbackForm from './components/feedback/FeedbackForm';
import StudentDetails from './components/feedback/StudentDetails';
import './sass/main.css';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import MoreDetailsForm from './components/feedback/MoreDetailsForm';
import ThankYou from './components/feedback/ThankYou';
import Dashboard from './components/admin/dashboard/Dashboard';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={StudentDetails}/>
        <Route exact path="/feedback" component={FeedbackForm} />
        <Route exact path="/moredetails" component={MoreDetailsForm} />
        <Route exact path="/thankyou" component={ThankYou} />
        <Route exact path="/admin/dashboard" component={Dashboard}/>
      </Switch>
   </Router>
  );
}

export default App;

标签： reactjsreact-reduxreact-routerreact-router-dom