Attaching Provider of react-redux gives me an invalid hook error

问题

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { combineReducers, createStore } from 'redux'
import { Provider } from 'react-redux'
import productReducer from './reducers/product-reducers'
import userReducer from './reducers/user-reducer'

const allReducers = combineReducers({
    products: productReducer,
    user: userReducer
})

const store = createStore(
    allReducers,
    {
        products: [{name: 'iPhone'}],
        user: 'Michael'
    },
    window.devToolsExtension && window.devToolsExtension()
);

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { connect } from 'react-redux'

function App() {
  return (

    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

const mapStateToProps = state => {
  return state
}

export default connect(mapStateToProps)(App);

After I attached a provider to my react app, it keeps giving me the following error:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

I don't think number 3 is an issue because I have checked through npm ls react that there is only one react installed.

How can I handle this issue?

来源：https://stackoverflow.com/questions/57088255/attaching-provider-of-react-redux-gives-me-an-invalid-hook-error

标签

reactjs

react-redux