运行代码时出错（deps.map不是函数）

Question

我是新来的反应者，正在尝试实现此代码。但是我收到此错误：

我正在尝试用部门值填充表格。 因此，将表渲染成这样

×
TypeError: deps.map is not a function
Department.render
D:/React/employee-app/src/components/Department.js:28
  25 |         <th>DepartmentName</th>
  26 |     </tr>
  27 | </thead>
> 28 | <tbody>
     | ^  29 |   {deps.map(dep=>
  30 |     <tr>key = {dep.DepartmentID}
  31 |     <td>{dep.DepartmentID}</td>
View compiled

这是我的代码：

export class Department extends Component{
    constructor(props){
        super(props);
        this.state={deps:[]}
    }

    refreshList(){
        this.setState({
            deps:[{"DepartmentID":1,"DepartmentName":"IT"},
            {"DepartmentID":2,"DepartmentName":"Support"}]
        })
    }

render(){
    const deps = this.state;
    return(

        <Table className="mt-4" striped bordered hover size="sm">
            <thead>
                <tr>
                    <th>DepartmentId</th>
                    <th>DepartmentName</th>
                </tr>
            </thead>
            <tbody>
              {deps.map(dep=>
                <tr>key = {dep.DepartmentID}
                <td>{dep.DepartmentID}</td>
                <td>{dep.DepartmentName}</td>
                </tr>
                
                )}
            </tbody>
            </Table>
    )

}

}

export default Department;

我不明白该错误。可以有人帮忙吗？

Answer 1

在渲染功能中进行此更改

const {deps} = this.state;