Javascript 如何在物料界面表格中显示动态数据？

我有一个API，它返回一些表格数据。我需要在表格中显示这些数据。我不清楚如何实现这个目标

假设我想显示存储在

组中的
id
和
name
字段。如何在材质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>
    )
} 

import'../../App.css'；
从“React”导入React，{useffect}
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“axios”导入axios
从“../../config/config.json”导入配置；
const useStyles=makeStyles（（主题）=>({
根目录：{
宽度：“100%”，
},
标题：{
fontSize：主题。排版。pxToRem（18），
fontWeight:theme.typography.fontWeightBold，
},
内容：{
fontSize：主题。排版。pxToRem（14），
fontWeight:theme.typography.fontWeightRegular，
textAlign：“左”，
玛金托普：主题。间距。单位*3，
边缘左侧：主题。间距。单位*3，
边缘光：主题。间隔。单位*3
},
表:{
最小宽度：650，
},
表格标题：{
fontWeight:theme.typography.fontWeightBold，
颜色：“ffffff”，
背景：“3f51b5”
},
表单元格：{
背景：“f50057”
},
按钮：{
字体大小：“12px”，
最小宽度：100
},
}));
导出函数Main（）{
const[groups，setGroup]=React.useState（“”）；
const classes=useStyles（）；
常量选项={
“标题”：{
'Authorization'：'Bearer${localStorage.getItem（'accessToken'）}`
}
}
useffect（（）=>{
get（config.api.url+'/api/test'，选项）
.然后（（组）=>{
this.setState（{response:groups}）
})
.catch（（错误）=>{
console.log（错误）；
})
}, [])
返回(
{Object.keys（groups）.map（（行，索引）=>(
测验
测验
))}
)
} 

更新：

正如我在评论中提到的，我遵循了答案中的建议，但我仍然看到一个空表，而我可以在控制台中看到一个正确的值

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>
    )

useffect（（）=>{
get（config.api.url+'/api/test'，选项）
.然后（（组）=>{
setGroup（组.数据.子任务）
console.log（groups.data.subtask）；
})
.catch（（错误）=>{
console.log（错误）；
})
}, [])
返回(
{Object.keys（groups）.map（（项，索引）=>(
{item.user_id}
{item.task_name}
))}
)

这是我在浏览器中看到的内容：


这是一个数据示例（
groups.data.subtask
）：

我认为问题在于您使用了
this.setState
而不是
setGroup

useEffect(() => {
    axios.get(config.api.url + '/api/test', options)
        .then( (groups) => {
            setGroup(groups)
        })
        .catch( (error) => {
            console.log(error);
        })
}, [])

更改地图功能

{Object.keys(groups).map( (row, index) => (
  <TableRow key={index} selected="false">
    <TableCell>{row._id}</TableCell>
    <TableCell>{row.user_id}</TableCell>
  </TableRow>))}

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) => {
                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>
)

{Object.keys（groups.map）（行，索引）=>(
{row._id}
{row.user_id}
))}
导入“../App.css”；
从“React”导入React，{useffect}
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“axios”导入axios
从“../../config/config.json”导入配置；
const useStyles=makeStyles（（主题）=>({
根目录：{
宽度：“100%”，
},
标题：{
fontSize：主题。排版。pxToRem（18），
fontWeight:theme.typography.fontWeightBold，
},
内容：{
fontSize：主题。排版。pxToRem（14），
fontWeight:theme.typography.fontWeightRegular，
textAlign：“左”，
玛金托普：主题。间距。单位*3，
边缘左侧：主题。间距。单位*3，
边缘光：主题。间隔。单位*3
},
表:{
最小宽度：650，
},
表格标题：{
fontWeight:theme.typography.fontWeightBold，
颜色：“ffffff”，
背景：“3f51b5”
},
表单元格：{
背景：“f50057”
},
按钮：{
字体大小：“12px”，
最小宽度：100
},
}));
导出函数Main（）{
const[groups，setGroup]=React.useState（[]）；
const classes=useStyles（）；
常量选项={
“标题”：{
'Authorization'：`Bearer${localStorage.getItem（'
const [groupKey,setGroupKey] = useState([]);

useEffect(() => {
  setGroupKey(Object.keys(groups));
},[groups]);

{groupKey.map((item, index) => (
  <TableRow key={index} selected="false">
    <TableCell>{item.user_id}</TableCell>
    <TableCell>{item.task_name}</TableCell>
  </TableRow>))
}