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 版本，因為較新的版本導致許多用戶出現該錯誤