对象作为 React 子对象无效(在 Internet Explorer 11 中,React 15.4.1)

IT技术 javascript reactjs ecmascript-6 redux internet-explorer-11
2021-05-01 03:02:04

对象作为 React 子对象无效(找到:带有键 {$$typeof, type, key, ref, props, _owner, _store} 的对象)。如果您打算渲染一组子项,请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查 的渲染方法App

应用容器:

const mapDispatchToProps = (dispatch) => {
    return {

            }
        }
    }
}

零件:

class App extends Component {
    render() {
        return (
        );
    }
}

以上是我的 app.js 渲染函数。此代码在 google chrome 中运行良好,但是当进入 Internet Explorer 时它不起作用并且抛出上述错误。

4个回答

自 React 15.4 和 IE11 以来的问题

如果你仍然有这个问题,你可以看看这个关于 React 15.4 和 IE11 的 react issue #8379我在 webpack 开发模式/IE11/React 15.4 中遇到了同样的问题,而且 React 和 ReactDom 似乎都使用了他们的 Symbol polyfill 版本(这是 15.4 的新版本):

不知何故 react 和 react-dom 不再“同意”该$$typeof

这应该是typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103

解决方案

我已经通过重新排序polyfillreact/react-dom以确保在 React 和 ReactDom 的 Symbol 之前加载 polyfill Symbol解决了这个问题......现在他们“同意” $$typeof 值。

webpack 的示例解决方案:

entry: [
 'babel-polyfill', // Load this first
 'react-hot-loader/patch', // This package already requires/loads react (but not react-dom). It must be loaded after babel-polyfill to ensure both react and react-dom use the same Symbol.
 'react', // Include this to enforce order
 'react-dom', // Include this to enforce order
 './index.js' // Path to your app's entry file
]

在我使用 React Native 的情况下,我们将这个神秘的错误拖了数周,只出现在没有附加调试器的 Android 版本中。

罪魁祸首是一个

import 'core-js'

在我们的根组件上,似乎polyfill 把事情搞砸了

解决方案是简单地将其删除,因为在我的情况下不再需要它

相关部分 package.json

  "react-native": "0.44.2",
  "react": "16.0.0-alpha.6",

我的问题是 babel-polyfill 需要高于我的 react-hot-loader 包含的内容。React 和 react-dom 需要在 webpack 条目中的 babel-polyfill 之前,原因如下所述:

https://github.com/facebook/react/issues/8379#issuecomment-263962787

看起来像这样:

开发:

entry: [
  'babel-polyfill',
  'react-hot-loader/patch',
  `webpack-dev-server/client?${localhost}:${PORT}`,
  'webpack/hot/only-dev-server',
  PATHS.app
]

生产:

entry: [
  'babel-polyfill',
  'react',
  'react-dom',
  PATHS.app
]

之前...

开发:

entry: [
  'react-hot-loader/patch',
  `webpack-dev-server/client?${localhost}:${PORT}`,
  'webpack/hot/only-dev-server',
  'babel-polyfill',
  PATHS.app
]

生产:

entry: [
  'babel-polyfill',
  PATHS.app
]

我的问题是相同的,使用 React Native 并在 ABD 设备/模拟器上测试 android 应用程序
在看到上面的建议后删除导入'core-js'并添加

entry: [
 'babel-polyfill', // Load this first
 'react-hot-loader/patch', // This package already requires/loads react (but not react-dom). It must be loaded after babel-polyfill to ensure both react and react-dom use the same Symbol.
 'react', // Include this to enforce order
 'react-dom', // Include this to enforce order
 './index.js' // Path to your app's entry file
]

对于 android/app/build.gradle 文件,我的问题没有解决,因为我的代码中最初没有像import 'core-js'import 'babel-polyfill'这样的任何导入语句

**

解决方案:

** 删除 import 语句后,我添加了import 'core-js'; 到我的根目录 index.js。通过命令提示/终端手动添加库。这解决了我的问题。希望这有帮助。