Rest 参数在我的 react-bootstrap 组件中产生错误？

Question

这总是对我有用，但由于某种原因，它在我的 react-bootstrap 组件中不起作用，这令人困惑，rest 参数{classes, ...props}导致代码抛出错误并且不知道为什么？

当我尝试在codesandbox中重现错误时，一切正常，但即使在创建了许多新项目并删除了所有可能影响代码的包之后，错误仍然存在于我的机器中，直到我创建了一个我上传的非常基本的项目它在github上

只是从dropdown.js文件中导入ReusableDropdown组件会产生类型错误，并且反应说错误发生在组件本身而不是父组件内部：

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

这应该有效，我确信错误与语法无关，这是一种奇怪的错误！

PS：需要安装 react-bootstrap 和 bootstrap 作为依赖才能重现错误

Answer 1

这可能是一个题外话，但是，因为我看到<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>
  );
}

或者，您可以检查 null 值

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

而且，我了解Dropdown.Toggle需要id道具。 你能检查一下所需的道具吗？

Answer 2

@Jaromanda X @Misol Goh 感谢您的帮助

经过几个小时尝试调试后，我发现这个线程回答了我的问题

无法读取 React 中未定义的属性“forEach”

解决方案1：

将以下内容添加到 package.json：

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

解决方案2：

降级到 react-scripts 的 3.0.1 版本，因为较新的版本导致许多用户出现该错误