这总是对我有用,但是由于某种原因,它在我的react-bootstrap组件中不起作用,这很令人困惑,rest参数{classes, ...props}
导致代码抛出错误并且不知道为什么?
当我尝试在codesandbox中重现错误时,一切正常,但是即使在创建许多新项目并删除了所有可能影响代码的软件包之后,错误仍然存在于我的机器中,直到达到我创建的地步一个非常基本的项目,我将其上传到了github here
仅从dropdown.js文件导入ReusableDropdown
组件会产生类型错误,并且反应说该错误发生在组件本身而不是父组件内部:
./src/reusable/dropdown.js
TypeError: Cannot read property 'forEach' of undefined
这应该可以工作,我确定错误与语法无关,这是一种奇怪的错误!
PS:您需要安装react-bootstrap和bootstrap作为依赖项,以便能够重现错误
可能是题外话,但是,因为我看到classes
组件中没有<ReusableDropdown>
,
<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
道具。您还能检查所需的道具吗?
@@ Jaromanda X @Misol Goh,感谢您的帮助
经过数小时的尝试调试后,我发现此线程回答了我的问题
Cannot read property 'forEach' of undefined in React
解决方案1:
将以下内容添加到package.json:
"resolutions": {
"eslint-loader": "3.0.2"
}
解决方案2:
降级到React-scripts的3.0.1版本,因为较新版本导致该错误或许多用户