Недопустимые дочерние элементы prop в провайдере

#javascript #reactjs #redux #react-redux

#javascript #reactjs #переопределение #реагировать-redux

Вопрос:

Я изучал React в течение последних нескольких недель.
Сначала я разработал простой чат с помощью plain React, а теперь я начал интегрировать Redux в свое приложение.

Я добавил простое действие, соответствующий редуктор (вместе с корневым редуктором) и хранилище. Затем я дошел до той части, где мне нужно использовать Provider из библиотеки react-redux:

 import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import ConfigureStore from './Store/ConfigureStore';
import Routes from './Routes';

const store = ConfigureStore();
ReactDOM.render(
    <Provider store={store}>
        <Router history={browserHistory}
            routes={Routes} />,
    </Provider>,
    document.getElementById('root')
);

Приложение компилируется нормально, но я получаю следующие ошибки в консоли:

Предупреждение: Сбойный тип prop: Недопустимый prop children типа, array предоставленного Provider , ожидаемый один ReactElement. в провайдере

Неперехваченное инвариантное нарушение: реагирует.Дочерние элементы. ожидается получение только одного дочернего элемента React.

Я использую приложение React Create в качестве начального набора.

Полный код можно найти здесь.

1. У вас есть , after <Router history={browserHistory} routes={Routes} /> . Попробуйте удалить это?

2. @iamnat Я ломал голову около 2 часов, читая почти все, что связано с Google… Спасибо. Пожалуйста, дайте ответ, и я выберу его. Не могу поверить, что я пропустил такую мелочь.

Ответ №1:

У тебя есть , после <Router history={browserHistory} routes={Routes} />

Попробуйте удалить его?

Ответ №2:

Та же ошибка:

Предупреждение: Сбойный тип prop: Недопустимый prop children типа, array предоставленного Provider , ожидаемый один ReactElement.

Неперехваченная ошибка: реагирует.Дочерние элементы. ожидается получение только одного дочернего элемента React.

Мне пришло в голову написать Provider в этом формате:

 <Provider store={store}> <App4Connected /> </Provider>

вместо этого корректно работает следующее:

 <Provider store={store}>
    <App4Connected />
</Provider>

Ответ №3:

Для меня запись в этом формате вызывала ошибку:

 ReactDOM.render(<Provider store={store}> <App /> </Provider>, document.getElementById('root'));

Но это работает нормально:

 ReactDOM.render(
    <Provider store={store}> 
        <App /> 
    </Provider>, 
    document.getElementById('root'));