Question

我正在尝试使用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配置配合使用：

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

Answer 1

经过数小时的调试，我发现从Webpack 'react-hot-loader/patch' arr中删除entry后，该错误消失了。不知道为什么会发生，但希望它可以节省别人的时间

Answer 2

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

例如，使用 compose 中的 recompose：

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

React.memo 应该在 connect 之前使用。

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

2 个答案: