对象作为 React 子代无效（在 Internet Explorer 11 中用于 React 15.4.1）

Posted 2023-02-22

【中文标题】对象作为 React 子代无效（在 Internet Explorer 11 中用于 React 15.4.1）

【英文标题】：Objects are not valid as a react child (In Internet explorer 11 for React 15.4.1)

【发布时间】：2017-04-15 08:13:54

【问题描述】：

对象作为 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 时它无法正常工作，并引发上述错误。

【问题讨论】：

什么是 this.props.children？单个值还是数组？

是的，告诉我们this.props.children会发生什么？

$$typeof : Symbol(react.element) _owner: ReactCompositeComponentWrapper _self:null _source:null _store:Object key:null props:Object ref:null ,This is the Object (this.props.children )

我假设您在发布之前已在 *** 和网络上研究过您的问题。告诉我们您发现了什么以及为什么没有帮助？见Before You Ask。

【参考方案1】：

自 React 15.4 与 IE11 以来的问题

如果您仍然有这个问题，您可以查看this react issue #8379 about React 15.4 and IE11。 我在 webpack 开发模式 / IE11 / React 15.4 上遇到了同样的问题，似乎 React 和 ReactDom 都使用了他们的 Symbol polyfill 版本（这是 15.4 的新功能）：

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

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

解决方案

我已经通过重新排序 polyfill 和 react / 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
]

【讨论】：

我认为您的解决方案接近我的问题，我的代码中有 ES6.polyfill()。如何覆盖 React 和 ReactDoms 符号？

请注意，我的 react 和 react-dom 版本是 15.4.1

你必须确保你的 ES6.polyfill() 代码在 React 和 ReactDom 被加载之后被加载。尝试调试以查看首先加载了哪个库，然后根据需要更改您的 webpack 配置。

@FrançoisMaturel 这似乎不正确。 polyfill 必须在其他任何事情之前出现，包括 react 和 react-dom

我已经将我的 babel-polyfill 导入语句移到了 react 和 react-dom 导入之后，现在我的项目正在运行。我没有看到任何对 Object.assign() 的调用或 polyfill 涵盖的任何其他内容的副作用。如果还有其他人，请说出来。

【参考方案2】：

在我使用 React Native 的情况下，我们将这个神秘的 bug 拖了几个星期，只出现在没有附加调试器的 android 版本上。

罪魁祸首是

import 'core-js'

在我们的根组件上，似乎 polyfill 搞砸了

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

package.json的相关部分

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

【讨论】：

我遇到了同样的问题（我没有 import 'core-js'，我正在使用 import 'babel-polyfill'），你是如何最终解决这个问题的删除你的 polyfill？

@jaime-agudo 我们拥有完全相同版本的 React 和 RN，并且在导入 'core-js/es6/symbol' 后，我们在 Android 上出现以下异常：`` 'Objects are not valid as一个 React 孩子......' `` 是你的问题吗？你是怎么解决的？谢谢！

我通过在 index.android.js/index.ios.js 文件中导入所有 polyfill 解决了这个问题，并延迟导入 'react' 和 'react-native' 直到根组件 App.js，这是一个单独的文件。

【参考方案3】：

我的问题是 babel-polyfill 需要高于我的 react-hot-loader 包含。由于此注释描述的原因，需要在 webpack 条目中执行 babel-polyfill 之前的 React 和 react-dom：

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
]

【参考方案4】：

我的问题是相同的，并且正在使用 React Native 并且正在 ABD 设备/模拟器上测试 android 应用程序。 在看到上面的建议后删除 import '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。通过命令提示符/终端手动添加库。 这解决了我的问题。希望这会有所帮助。

【参考方案5】：

在我的情况下，我从 react-slingshot 开始我的项目，这是一个对我有用的解决方案：

# from https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill   
$ npm install react-app-polyfill --save

然后在webpack.config.js文件中

entry: [
    'react-app-polyfill/ie11', // <==== Important line and must be loaded before you code does
    path.resolve(__dirname, 'src/index.js')
],
target: 'web',
mode: 'development',
plugins: [
...

您可以在此处查看完整文档：react-app-polyfill

希望这对你们也有用！