我正在使用Material-UI进行一切正常的反应,但出现错误 TypeError:无法读取未定义的属性“ map” 。我还使用axio API来获取演示数据。我正在使用material-UI进行一切正常工作,但出现错误 TypeError:无法读取未定义的属性'map'。我也在使用axio API来获取演示数据。
import React, { Component } from 'react'
import ApiService from "../../service/ApiService";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Button from '@material-ui/core/Button';
import CreateIcon from '@material-ui/icons/Create';
import DeleteIcon from '@material-ui/icons/Delete';
import Typography from '@material-ui/core/Typography';
class ListUserComponent extends Component {
constructor(props) {
super(props)
this.state = {
users: [],
message: null
}
this.deleteUser = this.deleteUser.bind(this);
this.editUser = this.editUser.bind(this);
this.addUser = this.addUser.bind(this);
this.reloadUserList = this.reloadUserList.bind(this);
}
componentDidMount() {
this.reloadUserList();
}
reloadUserList() {
ApiService.fetchUsers()
.then((res) => {
this.setState({users: res.data.result})
});
}
deleteUser(userId) {
ApiService.deleteUser(userId)
.then(res => {
this.setState({message : 'User deleted successfully.'});
this.setState({users: this.state.users.filter(user => user.id !== userId)});
})
}
editUser(id) {
window.localStorage.setItem("userId", id);
this.props.history.push('/edit-user');
}
addUser() {
window.localStorage.removeItem("userId");
this.props.history.push('/add-user');
}
render() {
return (
<div>
<Typography variant="h4" style={style}>User Details</Typography>
<Button variant="contained" color="primary" onClick={() => this.addUser()}>
Add User
</Button>
<Table>
<TableHead>
<TableRow>
<TableCell>Id</TableCell>
<TableCell>FirstName</TableCell>
<TableCell align="right">LastName</TableCell>
<TableCell align="right">UserName</TableCell>
<TableCell align="right">Age</TableCell>
<TableCell align="right">Salary</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.state.users.map(row => (
<TableRow key={row.id}>
<TableCell component="th" scope="row">
{row.id}
</TableCell>
<TableCell align="right">{row.firstName}</TableCell>
<TableCell align="right">{row.lastName}</TableCell>
<TableCell align="right">{row.username}</TableCell>
<TableCell align="right">{row.age}</TableCell>
<TableCell align="right">{row.salary}</TableCell>
<TableCell align="right" onClick={() => this.editUser(row.id)}><CreateIcon /></TableCell>
<TableCell align="right" onClick={() => this.deleteUser(row.id)}><DeleteIcon /></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}
}
const style ={
display: 'flex',
justifyContent: 'center'
}
export default ListUserComponent;