Параметр Rest вызывает ошибку в моем компоненте реагировать на загрузку?

Question

Это всегда работает для меня, но по какой-то причине, это не работает в моем компоненте реагировать с начальной загрузкой, и это сбивает с толку, параметр rest {classes, ...props} вызывает код, выдающий ошибку, и не знает, почему ??

Когда я пытался воспроизвести ошибку в codesandbox , все работало нормально, но ошибка все еще на моей машине, даже после создания многих новых проектов и удаления всех пакетов, которые могут повлиять на код, пока я не достиг точкичто я создал очень простой проект, я загрузил его на github здесь

Просто импорт компонента ReusableDropdown из dropdown.js вызвал ошибку типа и реагировалговорит, что ошибка происходит в самом компоненте, а не в родительском компоненте:

./src/reusable/dropdown.js
TypeError: Cannot read property 'forEach' of undefined

Это должно работать, и я уверен, что ошибка не имеет отношения к синтаксису, это своего рода странная ошибка !!

PS: Вам необходимо установить response-bootstrap и bootstrap как зависимости, чтобы можно было воспроизвести ошибку

Answer 1

@ Jaromanda X @Misol Goh Спасибо за попытку помочь

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

Невозможно прочитать свойство 'forEach'undefined в React

Решение 1:

с добавлением следующего в package.json:

"resolutions": {
    "eslint-loader": "3.0.2"
  }

Решение 2:

понижение до версии 3.0.1 реагирующих сценариев, поскольку более новая версия вызвала эту ошибку для многих пользователей

Answer 2

Это может быть не по теме, но, поскольку я увидел, что в <ReusableDropdown> компоненте нет classes,

<ReusableDropdown text="his"/>

Я хочу предложить добавить defaultProps, например,

import React, { Component } from 'react';
import { Dropdown } from 'react-bootstrap';

export default ({classes = [], ...props}) => {
  return (
    <Dropdown>
       <Dropdown.Toggle className={classes.toggle}>{props.text}</Dropdown.Toggle>
       <Dropdown.Menu>
         <Dropdown.Item>hi</Dropdown.Item>
       </Dropdown.Menu>
    </Dropdown>
  );
}

Или вы можете проверить нулевое значение

<Dropdown>
  <Dropdown.Toggle className={classes && classes.toggle}>
    {props.text}
  </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item>hi</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

И я понимаю, что Dropdown.Toggle требует id проп. Не могли бы вы также проверить необходимые реквизиты?