Хобрук: Ваш путь к мастерству в программировании

Объекты недопустимы в качестве дочернего элемента реакции (в 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 он не работает и вызывает указанную выше ошибку.


  • Что такое {this.props.children}? одно значение или массив? 01.12.2016
  • да скажите нам, что идет как this.props.children? 01.12.2016
  • $$ typeof: Symbol (react.element) _owner: ReactCompositeComponentWrapper _self: null _source: null _store: Ключ объекта: null props: Ссылка на объект: null, Это объект (this.props.children) 01.12.2016
  • Я предполагаю, что вы изучили свой вопрос о Stackoverflow и Интернете перед публикацией. Расскажите, что вы нашли и почему это не помогло? См. Прежде чем спросить. 01.12.2016

Ответы:


1

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

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

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

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

Решение

Я решил эту проблему, переупорядочив polyfill и react / react-dom, чтобы быть уверенным, что символ полифила загружается до символа React и ReactDom ... Теперь они согласны со значением $$ 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
]
02.12.2016
  • Я думаю, что ваше решение близко к моей проблеме, у меня в коде есть ES6.polyfill (). Как я могу переопределить символы React и ReactDoms? 02.12.2016
  • Обратите внимание, что мои версии response и react-dom - 15.4.1 02.12.2016
  • Вы должны убедиться, что ваш код ES6.polyfill () загружается после загрузки React и ReactDom. Попробуйте выполнить отладку, чтобы увидеть, какая библиотека загружается первой, затем при необходимости измените конфигурацию веб-пакета. 05.12.2016
  • @ FrançoisMaturel, что кажется неправильным. Полифилл должен появиться ДО всего остального, включая react и react-dom. 12.01.2017
  • @AvindraGoolcharan спасибо, что указали на это, не проверял. 13.01.2017
  • Я переместил свой оператор импорта babel-polyfill после импорта response и response-dom, и теперь мой проект работает. Я не вижу побочных эффектов при вызовах Object.assign () или чего-либо еще, охватываемого полифилом. Если кто-то еще есть, скажите, пожалуйста. 09.03.2017
  • Исправлена ​​ли эта проблема в более поздних версиях React? 22.03.2018
  • @ RenéSchubert, поскольку разделение react / react-dom было сделано намеренно, я предполагаю, что проблема все еще присутствует в более поздних версиях, но у меня не было возможности проверить 22.03.2018
  • Невероятно, но это исправляет также тестирование с Phantom JS и работает также для React 16. 31.07.2020

  • 2

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

    Виновником был

    import 'core-js'

    в нашем корневом компоненте кажется, что polyfill все испортил

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

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

      "react-native": "0.44.2",
      "react": "16.0.0-alpha.6",
    
    01.06.2017
  • У меня такая же проблема (у меня нет import 'core-js', я использую import 'babel-polyfill'), как вы в конечном итоге решили эту проблему, не удаляя свой полифилл? 05.06.2017
  • @ jaime-agudo У нас точно такие же версии React и RN, и после импорта 'core-js / es6 / symbol' у нас есть следующее исключение на Android: `` 'Объекты недействительны как дочерние элементы React ...' ' `Это проблема, которая у вас была? Как вы ее решили? Спасибо! 05.06.2017
  • Я решил эту проблему, импортировав все полифиллы в файлы index.android.js / index.ios.js и отложив импорт «react» и «react-native» до корневого компонента App.js, который является отдельным файлом. 05.06.2017

  • 3

    Моя проблема заключалась в том, что babel-polyfill должен был быть выше, чем мой загрузчик react-hot-loader. React и react-dom должны предшествовать babel-polyfill в записи webpack по причинам, описанным в этом комментарии:

    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
    ]
    
    18.10.2017

    4

    Моя проблема была такой же, и я использовал React Native и тестировал приложение Android на устройстве / эмуляторе ABD.
    После просмотра предложений сверху по удалению 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 'core-js'; в свой корневой каталог, который был index.js. С добавлением библиотеки вручную через командную строку / Терминал. Это решило мою проблему. Надеюсь, это поможет.

    07.06.2018

    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

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

    23.01.2019
    Новые материалы

    Dall-E 2: недавние исследования показывают недостатки в искусстве, созданном искусственным интеллектом
    DALL-E 2 — это всеобщее внимание в индустрии искусственного интеллекта. Люди в списке ожидания пытаются заполучить продукт. Что это означает для развития креативной индустрии? О применении ИИ в..

    «Очень простой» эволюционный подход к обучению с подкреплением
    В прошлом семестре я посетил лекцию по обучению с подкреплением (RL) в моем университете. Честно говоря, я присоединился к нему официально, но я редко ходил на лекции, потому что в целом я нахожу..

    Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
    Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..

    Фишинг — Упаковано и зашифровано
    Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..

    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..

    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..

    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..


    © 2024 hobruk.ru, Хобрук: Ваш путь к мастерству в программировании