reactjs - 附加 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。
我该如何处理这个问题?
解决方案
推荐阅读
- java - 更正应用程序的类路径,使其包含一个兼容的 javax.annotation.Resource 版本
- css - CSS 媒体查询不适用于确切的 767
- asynchronous - 如何在测试类中覆盖完成方法?
- java - 使用 ant java.lang.ClassNotFoundException 运行 ptest: org.pitest.coverage.execute.CoverageMinion
- javascript - 如何从嵌套树结构中分离单个对象
- flutter - 我需要使用带有动态图像图标和价格的自定义画家制作一张位图图像,如颤动
- install4j - Install4j 项目构建失败
- terraform - Terragrunt - 不支持的属性 --- 但 tfstate 具有该属性
- oracle - Oracle Insert 查询在生产环境中需要很长时间,但在较低环境中执行时间为 3 秒
- javascript - 如何完成删除div?