首页 > 解决方案 > 附加 react-redux 的提供者给了我一个无效的钩子错误

问题描述

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();

应用程序.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);

在我将提供程序附加到我的反应应用程序后,它不断给我以下错误:

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

我认为 3 号不是问题,因为我已经检查过npm ls react只安装了一个 react。

我该如何处理这个问题?

标签: reactjsreact-redux

解决方案


推荐阅读