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

问题描述 投票:0回答:2

这总是对我有用,但是由于某种原因,它在我的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作为依赖项,以便能够重现错误

javascript reactjs react-bootstrap
2个回答
1
投票

可能是题外话,但是,因为我看到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道具。您还能检查所需的道具吗?


0
投票

@@ 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版本,因为较新版本导致该错误或许多用户

© www.soinside.com 2019 - 2024. All rights reserved.