Объекты недействительны в качестве реагирующего ребенка (в Internet Explorer 11 для React 15.4.1)

Объекты недействительны в качестве дочернего элемента React (найдено: объект с ключами {$$ typeof, type, key, ref, props, _owner, _store}). Если вы хотите отобразить коллекцию детей, используйте массив или оберните объект с помощью createFragment (object) из надстроек React. Проверьте метод рендеринга App.

AppContainer:

const mapDispatchToProps = (dispatch) => {
    return {

            }
        }
    }
}

компонент:

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

Выше моя функция рендеринга для app.js. Этот код отлично работает в google chrome, но при приходе в Internet explorer он не работает и бросает вышеуказанную ошибку.

Ответы

Ответ 1

Проблема с React 15.4 с IE11

Если у вас все еще есть эта проблема, вы можете взглянуть на эту проблему # 8379 о React 15.4 и IE11. У меня была такая же проблема с webpack dev mode/IE11/React 15.4, и кажется, что каждый React и ReactDom используют свою версию Polyfill Symbol (это новая версия с 15.4):

Каким-то образом реагировать и реагировать больше не "согласны" на значение $$typeof

это должно быть typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103.

Решение

Я решил эту проблему, переупорядочив polyfill и react/react-dom чтобы убедиться, что символ polyfill загружается перед символом React и ReactDom... Теперь они "согласны" со значением $$ typeof.

Пример для веб-пакета:

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 entry file
]

Ответ 2

В моем случае с React Native мы тащили эту загадочную ошибку в течение недель, появляющихся только на Android-сборках без прикрепленного отладчика.

виновник был

import 'core-js'

на нашем корневом компоненте, кажется, что polyfill был messing вещи вверх

Решение заключалось в том, чтобы просто удалить его, поскольку он больше не нужен в моем случае

Соответствующая часть package.json

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

Ответ 3

В моей проблеме был babel- polyfill, который должен быть выше моего реактивного жаргона. Реагировать и реагировать необходимо для перехода к babel- polyfill в записи webpack по причинам, описанным в этом комментарии:

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

Посмотрел:

Dev:

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
]

Ранее...

Dev:

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 и тестировал приложение для Android на устройстве/эмуляторе ABD.
После просмотра предложений сверху удалить импорт '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 entry file
]

в файл android/app/build.gradle, моя проблема не была решена, так как у меня не было ни одного оператора import, такого как import 'core-js' или import 'babel-polyfill', изначально в моем коде.

**

Решение:

** После удаления оператора импорта я добавил импорт 'core-js'; в мой корневой каталог, который был index.js. При ручном добавлении библиотеки через командную строку/Терминал. Это решило мою проблему. Надеюсь, это поможет.

Ответ 5

В моем случае я начал свой проект с Reaction-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: [
...

Вы можете увидеть полную документацию здесь: response-app-polyfill

Надеюсь, это также работает для вас, ребята!