jQuery 项目中 Redux 状态更改后尝试渲染组件时的无效挂钩调用答案

【问题标题】：Invalid hook call when trying to render a component after a Redux state change in jQuery projectjQuery 项目中 Redux 状态更改后尝试渲染组件时的无效挂钩调用
【发布时间】：2020-12-02 12:35:01
【问题描述】：

我想逐渐从我的项目中删除 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;

【问题讨论】：

标签： javascript reactjs react-hooks react-functional-component

【解决方案1】：

原来我在渲染时缺少 Provider 组件。 “无效的钩子调用”是对这个特定错误的糟糕描述。

//main.js
    import { Provider } from 'react-redux';
    ReactDOM.render(
        <Provider store={store}>
          MyUl
          <MyUl/>
        </Provider>,
    
        $('#blockLinks')[0]
    );

【讨论】：