IE11 React.memo + react-redux connect问题

8 浏览
0 Comments

IE11 React.memo + react-redux connect问题

我正在尝试使用React.memo来对redux-connected组件进行记忆化处理。

我的代码在大多数浏览器中正常工作，但是在IE浏览器中会抛出错误：

您必须将组件传递给connect返回的函数。而不是收到 {"$$typeof":60115,"compare":null}

组件代码：

import React, { memo } from 'react';
import { connect } from 'react-redux';
const MyComponent = ({ some, prop }) => (
  Some React
);
const MyComponentMemoized = memo(MyComponent);
const mapStateToProps = state => ({
  some: someSelector(state),
  prop: propSelector(state),
});
const MyComponentMemoizedAndConnected = connect(mapStateToProps)(MyComponentMemoized);
export default MyComponentMemoizedAndConnected;

关于应用程序设置的注意事项：使用带有babel-loader的webpack，babel配置：

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

0

2 答案

0 Comments

问题原因：在使用IE11时，如果React.memo和connect的顺序不正确，会出现问题。

解决方法：确保在使用compose函数时，React.memo的使用在connect之前。

0
0 Comments

问题的原因：从内容中可以看出，问题的原因是在webpack的entry配置中使用了'react-hot-loader/patch'导致的。

解决方法：从内容中可以看出，问题的解决方法是从webpack的entry配置中移除'react-hot-loader/patch'。

在经过数小时的调试后，我发现当我从我的webpack的entry数组中移除'react-hot-loader/patch'后，这个bug消失了。不知道为什么会发生这种情况，但希望这能为一些人节省时间。

感谢您发布了解决这个问题的方法。我建议您在48小时后尝试将自己的答案标记为解决方案。这可以帮助其他社区成员在未来遇到类似问题时解决。感谢您的理解。

0