如何解决jQuery项目中的Redux状态更改后尝试呈现组件时,无效的挂钩调用
我希望逐步从我的项目中删除jQuery以支持React。我正在尝试使用功能挂钩在Redux状态更改后更新视图。我在codepen.io上编写了一个工作示例。但是,当我尝试在项目中执行此操作时,尝试使用功能组件时收到无效的挂钩调用错误。我似乎以某种方式有2个版本的React,但是我不确定为什么。这是由webpack配置错误引起的吗?在我的注释中注释掉对useSelector的调用,可以消除该错误。
控制台对此检查返回false。
console.log(window.React1 === window.React2);
npm ls react
-- react@16.13.1
//package.json
"react": "^16.13.1","react-dom": "^16.13.1","react-redux": "^7.2.1",
//.babelrc for babel 7
// Invalid hook call error persists if modules & targets are commented out and the defaults are used instead
"presets": [
[
"@babel/preset-env",{
//turn off transpile to CommonJS
"modules": false,//allow native async await
"targets": {
"node": "10"
}
}
],"@babel/preset-react",//parse jsx syntax
]
}
//webpack.config.js
//rules
{
test: /\.(js|jsx)$/,exclude: /node_modules/,use: ['babel-loader']
},
//MyUl.jsx
import React from 'react';
import { useSelector } from 'react-redux';
window.React2 = React;
console.log(window.React1 === window.React2);
let liKey = 0
let li = (count) => {
return <li key={liKey++}>{count}</li>;
};
let buildList = (count) => {
let list = [];
for (let i = count; i--;) {
list.push(li(count));
}
return list;
};
export const MyUl = () => {
const blockList = useSelector(state => state.blockList);
let count = 4;
return (
<ul id='list'>
<li>1st element</li>
{buildList(count)}
</ul>
);
};
//main.js
import React from 'react';
import { MyUl } from './MyUl';
ReactDOM.render(MyUl(),$('#blockLinks')[0]);
window.React1 = React;
解决方法
事实证明,渲染时我缺少Provider组件。 “无效的钩子调用”是对此特定错误的可怕描述。
//main.js
import { Provider } from 'react-redux';
ReactDOM.render(
<Provider store={store}>
MyUl
<MyUl/>
</Provider>,$('#blockLinks')[0]
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。