正文

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

 2023-02-22  136

关键词：

【中文标题】对象作为 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

希望这对你们也有用！

【讨论】：

错误：对象作为 React Child 无效

】错误：对象作为ReactChild无效【英文标题】：Error:ObjectsarenotvalidasaReactChild【发布时间】：2018-08-2409:59:37【问题描述】：如果条件为假，我想显示一个对象，我在有状态组件返回语句中为此做了类似的事情。!this.state.searchCoin?displ... 查看详情

尝试在反应中映射数据时出现错误。对象作为 React 子对象无效（找到：带有键 children 的对象），我该如何解决？

】尝试在反应中映射数据时出现错误。对象作为React子对象无效（找到：带有键children的对象），我该如何解决？【英文标题】：IAMHAVINGERRORWHENTRYINGTOMAPADATAINREACT.ObjectsarenotvalidasaReactchild(found:objectwithkeyschildren),Howdoisolveit?尝试在反... 查看详情

错误：对象作为 React 子对象无效，但我的数据是对象数组？

】错误：对象作为React子对象无效，但我的数据是对象数组？【英文标题】：Error:ObjectsarenotvalidasaReactchild,butmydataisanarrayofobjects?【发布时间】：2021-04-1316:25:46【问题描述】：免责声明：我检查了其他线程，例如这个线程，可以看... 查看详情

Invariant Violation：对象作为使用 Expo 的 React 子对象无效

】InvariantViolation：对象作为使用Expo的React子对象无效【英文标题】：InvariantViolation:ObjectsarenotvalidasaReactchildusingExpo【发布时间】：2019-03-0905:44:32【问题描述】：我正在尝试在我的ReactNative应用程序中使用React的新Contextapi（使用Expo... 查看详情

React.js 错误：“对象作为 React 子项无效（找到：带有键的对象）。”

】React.js错误：“对象作为React子项无效（找到：带有键的对象）。”【英文标题】：React.jsError:"ObjectsarenotvalidasaReactchild(found:objectwithkeys)."React.js错误：“对象作为React子项无效（找到：带有键的对象）。”【发布时间】... 查看详情

对象作为 React Child 无效（找到：带有键 id，name 的对象）

】对象作为ReactChild无效（找到：带有键id，name的对象）【英文标题】：ObjectsarenotvalidasaReactChild(found:objectwithkeysid,name)对象作为ReactChild无效（找到：带有键id，name的对象）【发布时间】：2020-01-1309:08:29【问题描述】：我试图通过... 查看详情

对象作为 React 子对象无效（找到：带有键的对象）？

】对象作为React子对象无效（找到：带有键的对象）？【英文标题】：ObjectsarenotvalidasaReactchild(found:objectwithkeys)?对象作为React子对象无效（找到：带有键的对象）？【发布时间】：2022-01-0513:21:28【问题描述】：**Reack_formik**我正在... 查看详情

错误：对象作为 React 子项无效（找到：带有键的对象）。改用数组

】错误：对象作为React子项无效（找到：带有键的对象）。改用数组【英文标题】：Error:ObjectsarenotvalidasaReactchild(found:objectwithkeys).useanarrayinstead错误：对象作为React子项无效（找到：带有键的对象）。改用数组【发布时间】：2021-0... 查看详情

对象作为 React 子对象无效（找到：带键的对象...）

】对象作为React子对象无效（找到：带键的对象...）【英文标题】：ObjectsarenotvalidasaReactchild(found:objectwithkeys...)【发布时间】：2020-12-2814:00:49【问题描述】：我正在尝试设置一个状态。这是我的代码：importReact,Component,useRef,Fragment,... 查看详情

显示获取的数据问题：对象作为 React 子项/类型错误无效：未定义

】显示获取的数据问题：对象作为React子项/类型错误无效：未定义【英文标题】：Displayingfetcheddataissue:objectsnotvalidasReactchild/TypeError:undefined【发布时间】：2021-02-0708:01:09【问题描述】：我想使用生命周期方法显示从api获取的数据... 查看详情

错误：对象作为 React 子对象无效（找到：带键的对象..........）

】错误：对象作为React子对象无效（找到：带键的对象..........）【英文标题】：Error:ObjectsarenotvalidasaReactchild(found:objectwithkeys..........)【发布时间】：2018-01-1217:56:35【问题描述】：我正在尝试遍历对象数组。控制台上this.state.saveFri... 查看详情

错误：对象作为 React 子对象无效（找到：带有键 low, high 的对象）

】错误：对象作为React子对象无效（找到：带有键low,high的对象）【英文标题】：Error:ObjectsarenotvalidasaReactchild(found:objectwithkeyslow,high)错误：对象作为React子对象无效（找到：带有键low,high的对象）【发布时间】：2021-06-2013:55:54【问... 查看详情

Apollo 客户端错误，对象作为 React 子级无效（发现：[object Promise]）

】Apollo客户端错误，对象作为React子级无效（发现：[objectPromise]）【英文标题】：ApolloClientError,ObjectsarenotvalidasaReactchild(found:[objectPromise])【发布时间】：2019-06-2121:55:38【问题描述】：尝试对我的graphql查询执行异步/等待时，我遇... 查看详情

对象作为 React 子级无效（发现：[object Promise]）

】对象作为React子级无效（发现：[objectPromise]）【英文标题】：ObjectsarenotvalidasaReactchild(found:[objectPromise])【发布时间】：2018-05-1910:01:49【问题描述】：我正在尝试通过数组映射来呈现帖子列表。我以前做过很多次，但出于某种原... 查看详情

对象作为 React 子对象无效。如果您打算渲染一组子项，请改用数组 - 错误 Solidity - React

】对象作为React子对象无效。如果您打算渲染一组子项，请改用数组-错误Solidity-React【英文标题】：ObjectsarenotvalidasaReactchild.Ifyoumeanttorenderacollectionofchildren,useanarrayinstead-ErrorSolidity-React【发布时间】：2020-07-3114:16:45【问题描述】：... 查看详情

ReactFire - 将 Firebase 绑定到 React 状态时，获取“对象作为 React 子项无效”

】ReactFire-将Firebase绑定到React状态时，获取“对象作为React子项无效”【英文标题】：ReactFire-get\'ObjectsarenotvalidasaReactchild\'whenbindingFirebasetoReactstate【发布时间】：2016-02-1700:12:01【问题描述】：我正在尝试将我在Firebase中的数据绑... 查看详情

错误：对象作为 React 子项无效（找到：带有键的对象）。如果您打算渲染一组孩子，请改用数组

】错误：对象作为React子项无效（找到：带有键的对象）。如果您打算渲染一组孩子，请改用数组【英文标题】：Error:ObjectsarenotvalidasaReactchild(found:objectwithkeys).Ifyoumeanttorenderacollectionofchildren,useanarrayinstead错误：对象作为React子项... 查看详情

对象作为 React 子对象无效（找到：带有键 job 的对象）。如果您打算渲染一组孩子，请改用数组

】对象作为React子对象无效（找到：带有键job的对象）。如果您打算渲染一组孩子，请改用数组【英文标题】：ObjectsarenotvalidasaReactchild(found:objectwithkeysjob).Ifyoumeanttorenderacollectionofchildren,useanarrayinstead对象作为React子对象无效（找... 查看详情

正文

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

自 React 15.4 与 IE11 以来的问题

解决方案

错误：对象作为 React Child 无效

尝试在反应中映射数据时出现错误。对象作为 React 子对象无效（找到：带有键 children 的对象），我该如何解决？

错误：对象作为 React 子对象无效，但我的数据是对象数组？

Invariant Violation：对象作为使用 Expo 的 React 子对象无效

React.js 错误：“对象作为 React 子项无效（找到：带有键 的对象）。”

对象作为 React Child 无效（找到：带有键 id，name 的对象）

对象作为 React 子对象无效（找到：带有键 的对象）？

错误：对象作为 React 子项无效（找到：带有键 的对象）。改用数组

对象作为 React 子对象无效（找到：带键的对象...）

显示获取的数据问题：对象作为 React 子项/类型错误无效：未定义

错误：对象作为 React 子对象无效（找到：带键的对象..........）

错误：对象作为 React 子对象无效（找到：带有键 low, high 的对象）

Apollo 客户端错误，对象作为 React 子级无效（发现：[object Promise]）

对象作为 React 子级无效（发现：[object Promise]）

对象作为 React 子对象无效。如果您打算渲染一组子项，请改用数组 - 错误 Solidity - React

ReactFire - 将 Firebase 绑定到 React 状态时，获取“对象作为 React 子项无效”

错误：对象作为 React 子项无效（找到：带有键 的对象）。如果您打算渲染一组孩子，请改用数组

对象作为 React 子对象无效（找到：带有键 job 的对象）。如果您打算渲染一组孩子，请改用数组

React.js 错误：“对象作为 React 子项无效（找到：带有键的对象）。”

对象作为 React 子对象无效（找到：带有键的对象）？

错误：对象作为 React 子项无效（找到：带有键的对象）。改用数组

错误：对象作为 React 子项无效（找到：带有键的对象）。如果您打算渲染一组孩子，请改用数组