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

Question

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of App.

应用程序容器：

const mapDispatchToProps = (dispatch) => {
    return {

            }
        }
    }
}

组件：

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

以上是 app.js 的渲染函数。此代码在 google chrome 中运行良好，但在 Internet Explorer 中无法正常运行，并抛出上述错误。

Answer 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 的新版本）：

Somehow react and react-dom no longer "agree" on the $$typeof value

which should be typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103.

解决方案

我已经通过重新排序 polyfill 和 react / react-dom 来解决这个问题，以确保在 React 和 ReactDom 的符号之前加载 polyfill 符号...现在他们“同意”$$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
]

Answer 2

在我的 React Native 案例中，我们将这个神秘的错误拖了几周，它只出现在 Android 构建中，没有附加调试器。

罪魁祸首是一个

import 'core-js'

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

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

package.json

的相关部分

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

Answer 3

我的问题是 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
]

Answer 4

我的问题是相同的，使用的是 React Native 并在 ABD device/emulator.
上测试 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'[=28 这样的导入语句=] 或 import 'babel-polyfill' 最初在我的代码中。

**

解决方案：

** 为了删除导入语句，我将 import 'core-js'; 添加到我的根目录 index.js。通过命令 Prompt/Terminal 手动添加库。这解决了我的问题 issue.Hope 这很有帮助。

Answer 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

希望这对你们也有用！

Answer 6

我在我的项目中使用 core-js polyfill。

最终对我有用的解决方案是将这一行添加到我的 src/index.js 文件的顶部：

import 'core-js/es/symbol'

对象作为 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)

javascript

ecmascript-6

internet-explorer-11

reactjs

redux

自 React 15.4 与 IE11 以来的一个问题

解决方案