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

问题描述

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

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 时它不起作用并且抛出上述错误.

Above is my render function for app.js. This Code is working fine in google chrome, but when coming to Internet explorer It is not working and it is throwing the above error.

推荐答案

React 15.4 和 IE11 以来的问题

如果你还有这个问题，你可以看看这个关于 React 15.4 和 IE11 的反应问题 #8379.我在 webpack 开发模式/IE11/React 15.4 上遇到了同样的问题，而且 React 和 ReactDom 似乎都使用了他们的 Symbol polyfill 版本(这是 15.4 的新功能):

A problem since React 15.4 with IE11

If you still have this issue, you may have a look at this react issue #8379 about React 15.4 and IE11. I had the same problem with webpack dev mode / IE11 / React 15.4, and it seems that React and ReactDom each use their version of a Symbol polyfill (this is new with 15.4):

不知何故 react 和 react-dom 不再同意"；$$typeof 值

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

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

解决方案

我通过重新排序 polyfill 和 react/react-dom 来解决这个问题，以确保在 React 之前加载 polyfill Symbol和 ReactDom 的符号......现在他们同意"了在 $$typeof 值上.

Solution

I've resolved this issue by reordering polyfill and react / react-dom to be sure that the polyfill Symbol is loaded before React and ReactDom's Symbol... Now they "agree" on $$typeof value.

webpack 示例解决方案:

Example solution for 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 子对象无效(在 Internet Explorer 11 中，React 15.4.1)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！