Objects are not valid as a react child (In Internet explorer 11 for React 15.4.1)

问题

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.

AppContainer :

const mapDispatchToProps = (dispatch) => {
    return {

            }
        }
    }
}

Component:

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

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.

回答1:

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):

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

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

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.

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
]

回答2:

In my case with React Native we dragged this mysterious bug for weeks appearing just on Android builds without an attached debugger.

The culprit was an

import 'core-js'

on our root component, it seems the polyfill was messing things up

The solution was to simply remove it as it's no longer necessary in my case

Relevant portion of package.json

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

回答3:

My issue was babel-polyfill needed to be above my react-hot-loader includes. React and react-dom needed to preceed babel-polyfill in the webpack entry for reasons described by this comment:

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

Looked like this:

dev:

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

production:

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

Previously...

dev:

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

production:

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

回答4:

My Issue was same and was using React Native and was testing the android app on ABD device/emulator.
After seeing suggestions from above to remove import 'core-js' and to add

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
]

to android/app/build.gradle file, my issue was not resolved As i didn't had any of the import statement like import 'core-js' or import 'babel-polyfill' initially in my code.

**

Solution:

** Insted of removing import statement i added the import 'core-js'; to my root directory which was index.js. With manually adding the library through command Prompt/Terminal. This solved my issue.Hope this helps.

回答5:

In my case I started my project with react-slingshot and this is a solution that worked for me:

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

Then in the webpack.config.js file

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: [
...

You can see the full documentation here: react-app-polyfill

Hope this also works for you guys!

来源：https://stackoverflow.com/questions/40897966/objects-are-not-valid-as-a-react-child-in-internet-explorer-11-for-react-15-4-1