материал UI чип не работает внутри цикла

Question

Я пытаюсь использовать компонент Chip из material-ui.

Он работал, когда я использовал его один, но когда я рендерил его с помощью цикла (map), я получил эту ошибку:

Предупреждение. Сбой типа пропеллера: свойство children не поддерживается.Пожалуйста, удалите это.in Chip (созданный WithStyles (Chip))

вот пример моего метода рендеринга:

render() {
    const { classes, theme } = props;
    return (
        <div>
            {['aa', 'bb', 'cc'].map((e, index) => <Chip key={index}>{e}</Chip>)}
        </div>
    );
}

Из официальных документов Material-ui о детях:

Это свойство не поддерживается.Используйте свойство component, если вам нужно изменить дочернюю структуру.

Однако в моем примере я не использую дочернюю опору, что не так с моим кодом?

Answer 1

Вы отправляете e как дочерний компонент Chip.

Если вы хотите показать текст элемента массива (e), вы должны отправить его через label prop.

Это должно сделать работу за вас:

render() {
    const { classes, theme } = props;
    return (
        <div>
            {['aa', 'bb', 'cc'].map((e, index) => <Chip label={e} key={index} />)}
        </div>
    );
}