【发布时间】：2020-08-05 15:05:12
【问题描述】：
我有返回一些表格数据的 API。我需要在表格中显示这些数据。我不清楚如何实现这个目标。
假设我要显示存储在groups 中的字段id 和name。如何在 Material-UI 表中显示它们？
请在下面查看我当前的代码。它不会抛出任何错误。但两者都没有显示包含数据的表格。
import '../../App.css';
import React, { useEffect } from 'react'
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import axios from 'axios'
import config from '../../config/config.json';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
},
heading: {
fontSize: theme.typography.pxToRem(18),
fontWeight: theme.typography.fontWeightBold,
},
content: {
fontSize: theme.typography.pxToRem(14),
fontWeight: theme.typography.fontWeightRegular,
textAlign: "left",
marginTop: theme.spacing.unit*3,
marginLeft: theme.spacing.unit*3,
marginRight: theme.spacing.unit*3
},
table: {
minWidth: 650,
},
tableheader: {
fontWeight: theme.typography.fontWeightBold,
color: "#ffffff",
background: "#3f51b5"
},
tableCell: {
background: "#f50057"
},
button: {
fontSize: "12px",
minWidth: 100
},
}));
export function Main() {
const [groups, setGroup] = React.useState('');
const classes = useStyles();
const options = {
'headers': {
'Authorization': `Bearer ${localStorage.getItem('accessToken')}`
}
}
useEffect(() => {
axios.get(config.api.url + '/api/test', options)
.then( (groups) => {
this.setState({response: groups})
})
.catch( (error) => {
console.log(error);
})
}, [])
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12} className={classes.content}>
<TableContainer component={Paper}>
<Table id="split_table" size="small">
<TableHead>
</TableHead>
<TableBody>
{Object.keys(groups).map( (row, index) => (
<TableRow key={index} selected="false">
<TableCell>Test</TableCell>
<TableCell>Test</TableCell>
</TableRow>))}
</TableBody>
</Table>
</TableContainer>
</Grid>
</Grid>
</div>
)
}
更新：
正如我在 cmets 中提到的，我遵循了答案中的建议，但我仍然看到一个空表，而我可以在控制台中看到正确的值。
useEffect(() => {
axios.get(config.api.url + '/api/test', options)
.then( (groups) => {
setGroup(groups.data.subtask)
console.log(groups.data.subtask);
})
.catch( (error) => {
console.log(error);
})
}, [])
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12} className={classes.content}>
<TableContainer component={Paper}>
<Table id="split_table" size="small">
<TableHead>
</TableHead>
<TableBody>
{Object.keys(groups).map( (item, index) => (
<TableRow key={index} selected="false">
<TableCell>{item.user_id}</TableCell>
<TableCell>{item.task_name}</TableCell>
</TableRow>))}
</TableBody>
</Table>
</TableContainer>
</Grid>
</Grid>
</div>
)
这是我在浏览器中看到的：
这是一个数据示例（groups.data.subtask）：
【问题讨论】：
-
使用 setGroup(groups) 代替 this.setState({response: groups})
-
我认为这里有问题 setGroup(groups.data.subtask[0])。尝试这样写 setGroup(groups.data.subtask)
-
@AlexAV-dev：我试过了。它不起作用。
-
@AlexAV-dev：请查看我的最新更新，我按照您的要求发布了
groups.data.subtask的示例。 -
我更新了我的答案，看看吧。问题是你给了我们错误的对象键
标签： javascript reactjs axios material-ui