it-swarm.com.ru

Объекты недопустимы в качестве дочерних элементов реагирования (в Internet Explorer 11 для React 15.4.1)

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

AppContainer:

const mapDispatchToProps = (dispatch) => {
    return {

            }
        }
    }
}

Составная часть:

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

Выше моя функция рендеринга для app.js. Этот код работает нормально в Google Chrome, но при переходе в Internet Explorer он не работает и выдает ошибку выше.

21
LOKI321

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

Если у вас все еще есть эта проблема, вы можете взглянуть на эту проблему с реакцией № 8379 о React 15.4 и IE11 . У меня была такая же проблема с режимом разработки webpack/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's entry file
]
29
François Maturel

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

виновник был

import 'core-js'

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

Решение состояло в том, чтобы просто удалить это, поскольку это больше не необходимо в моем случае

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

  "react-native": "0.44.2",
  "react": "16.0.0-alpha.6",
7
Jaime Agudo

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

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
]
2
Matt Goo

Моя проблема была такой же, и я использовал 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's entry file
]

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

**

Решение:

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

0
Rishabh Sharma

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

Вы можете увидеть полную документацию здесь: Reaction-App-Polyfill

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

0
Elkin Angulo