IE11 React.memo + react-redux 连接问题答案

【问题标题】：IE11 React.memo + react-redux connect issueIE11 React.memo + react-redux 连接问题
【发布时间】：2021-01-07 11:48:50
【问题描述】：

我正在尝试使用 React.memo 来记忆 redux 连接的组件。我的代码在主流浏览器中运行正常，但 IE 报错：

You must pass a component to the function returned by connect. Instead received {"$$typeof":60115,"compare":null}

组件代码：

import React, { memo } from 'react';
import { connect } from 'react-redux';

const MyComponent = ({ some, prop }) => (
  <div>Some React</div>
);

const MyComponentMemoized = memo(MyComponent);

const mapStateToProps = state => ({
  some: someSelector(state),
  prop: propSelector(state),
});

const MyComponentMemoizedAndConnected = connect(mapStateToProps)(MyComponentMemoized);
export default MyComponentMemoizedAndConnected;

关于应用设置的注意事项：使用 webpack 和 babel-loader，babel config：

  "presets": [
    [
      "@babel/preset-env",
      {
        corejs: '3.6',
        "targets": {
          "chrome": "58",
          "ie": "11"
        },
        useBuiltIns: 'usage',
      },
    ],
    "@babel/preset-react"
  ]

【问题讨论】：

删除备忘录有用吗？
我在搜索结果中发现这个错误可能是由于3个原因。组件之间的循环依赖，export 和 export default 的错误用法，然后导入错误的方式，以及错误使用了 connect 函数，传递了错误的参数。您可以尝试检查它可能有助于解决问题。 Helpful article 和 Helpful thread
@ducmai 是的，它可以在没有备忘录的情况下工作；并且只记住没有连接的组件也可以

标签： reactjs redux react-redux internet-explorer-11 babeljs

【解决方案1】：

经过数小时的调试后，我发现在我从 webpack entry arr 中删除 'react-hot-loader/patch' 后，此错误消失了。不知道为什么会这样，但希望它能节省一些人的时间

【讨论】：

感谢您发布此问题的解决方案。我建议你尝试在 48 小时后标记你自己对这个问题的答案，当它可以标记时。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。

【解决方案2】：

如果有人遇到此问题，请检查您使用memo 和connect 的顺序。

例如，使用来自recompose 的compose：

compose(
    React.memo,
    connect(mapStateToProps),
)(MyComponent);

React.memo 应在connect 之前使用。

【讨论】：