错误：元素类型无效：编辑按钮显示错误

Question

我是新来的反应，并试图将编辑按钮放在编辑功能行旁边到数据库中但是我收到此错误消息。

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

Check the render method of `Department`.

▶ 23 stack frames were collapsed.

(anonymous function)

D:/React/employee-app/src/components/Department.js:22

  19 |    fetch('https://localhost:44363/api/department')

  20 |    .then(response=>response.json())

  21 |    .then(data=>{

> 22 |     this.setState({deps:data});

     | ^  23 |    }

  24 |     );

  25 | }

View compiled

这是代码：

Department.js

export class Department extends Component{

    constructor(props){

        super(props);

        this.state={deps:[],addModalShow:false,editModalShow:false}

    }

    componentDidMount(){

        this.refreshList();

    }

    refreshList(){

       fetch('https://localhost:44363/api/department')

       .then(response=>response.json())

       .then(data=>{

        this.setState({deps:data});

       }

        );

    }

    componentDidUpdate(){

        this.refreshList();

    }

render(){

    const {deps,depid,depname} = this.state;

    let addModalClose = () => this.setState({addModalShow:false});

    let editModalClose = () => this.setState({editModalShow:false});

    return(

        <div>

        <Table className="mt-4" striped bordered hover size="sm">

            <thead>

                <tr>

                    <th>DepartmentId</th>

                    <th>DepartmentName</th>

                    <th>Option</th>

                </tr>

            </thead>

            <tbody>

              {deps.map(dep =>

                <tr key = {dep.DepartmentID}>

                <td>{dep.DepartmentID}</td>

                <td>{dep.DepartmentName}</td>

                <td>

               <ButtonToolbar>

                <Button

                className="mr-2"

                 variant="info"

                onClick={()=>

                     this.setState({editModalShow:true,depid:dep.DepartmentID,depname:dep.DepartmentName})

                }>

    )

}

}

Answer 1

export从两个组件的第一行删除关键字。仅在文件底部使用默认导出。class Department extends Component{&nbsp;....&nbsp;render() {&nbsp;}}export default Department;然后对于进口使用这种类型import EditDepModal from './EditDepModal';您可以阅读更多关于 JS 中默认导入和命名导入之间的区别。https://medium.com/@tharakabimal/understand-the-difference-between-default-and-named-imports-and-exports-fc04b2736c1a

Answer 2

不确定您的项目设置是否有严格的 eslint 规则，并且您的更改是否由于缺少而被提交；at 语句：this.state={deps:[],addModalShow:false,editModalShow:false}