Javascript 如何使用来自API响应的JSON呈现材质表？

我是ReactJS新手，这是我创建的第一个页面，但是我在设置变量方面遇到了一些问题

我需要的是使用来自

const response=wait api.get（'/users'）

的值填充变量table.data，并在页面加载时使用此值呈现表格

我有以下代码：

import React, { useState, useEffect } from 'react';
import { Fade } from "@material-ui/core";
import MaterialTable from 'material-table';
import { makeStyles } from '@material-ui/core/styles';

import api from '../../services/api.js';

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        width: '70%',
        margin: 'auto',
        marginTop: 20,
        boxShadow: '0px 0px 8px 0px rgba(0,0,0,0.4)'
    }
}));

function User(props) {
    const classes = useStyles();
    const [checked, setChecked] = useState(false);

    let table = {
        data: [
            { name: "Patrick Mahomes", sector: "Quaterback", email: "patrick@nfl.com", tel: "1234" },
            { name: "Tom Brady", sector: "Quaterback", email: "tom@nfl.com", tel: "5678" },
            { name: "Julio Jones", sector: "Wide Receiver", email: "julio@nfl.com", tel: "9876" }
        ]
    }

    let config = {
        columns: [
            { title: 'Name', field: 'name' },
            { title: 'Sector', field: 'sector' },
            { title: 'E-mail', field: 'email'},
            { title: 'Tel', field: 'tel'}
        ],
        actions: [
            { icon: 'create', tooltip: 'Edit', onClick: (rowData) => alert('Edit')},
            { icon: 'lock', tooltip: 'Block', onClick: (rowData) => alert('Block')},
            { icon: 'delete', tooltip: 'Delete', onClick: (rowData) => alert('Delete')},
            { icon: 'visibility', tooltip: 'Access', onClick: (rowData) => alert('Access')},
            { icon: "add_box", tooltip: "Add", position: "toolbar", onClick: () => { alert('Add') } }
        ],
        options: {
            headerStyle: { color: 'rgba(0, 0, 0, 0.54)' },
            actionsColumnIndex: -1,
            exportButton: true,
            paging: true,
            pageSize: 10,
            pageSizeOptions: [],
            paginationType: 'normal'
        },
        localization: {
            body: { 
                emptyDataSourceMessage: 'No data' 
            },
            toolbar: { 
                searchTooltip: 'Search',
                searchPlaceholder: 'Search',
                exportTitle: 'Export'
            },
            pagination: {  
                labelRowsSelect: 'Lines',
                labelDisplayedRows: '{from} to {to} for {count} itens',
                firstTooltip: 'First',
                previousTooltip: 'Previous',
                nextTooltip: 'Next',
                lastTooltip: 'Last'
            },
            header: {
                actions: 'Actions'
            }
        }
    }

    useEffect(() => {
        setChecked(prev => !prev);

        async function loadUsers() {
            const response = await api.get('/users');
            table.data = response.data;
        }

        loadUsers();
    }, [])


    return (
        <>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

            <Fade in={checked} style={{ transitionDelay: checked ? '300ms' : '0ms' }}>
                <div className={classes.root}>
                    <MaterialTable editable={config.editable} options={config.options} localization={config.localization} title="Usuários" columns={config.columns} data={table.data} actions={config.actions}></MaterialTable>
                </div>
            </Fade>
        </>
    );
}

export default User;

import React，{useState，useffect}来自“React”；
从“@material ui/core”导入{Fade}”；
从“物料表”导入物料表；
从'@material ui/core/styles'导入{makeStyles}；
从“../../services/api.js”导入api；
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
宽度：“70%”，
页边空白：“自动”，
玛金托普：20，
boxShadow:'0px 0px 8px 0px rgba（0,0,0.4）'
}
}));
功能用户（道具）{
const classes=useStyles（）；
const[checked，setChecked]=使用状态（false）；
让表={
数据：[
{姓名：“Patrick Mahomes”，扇区：“Quaterback”，电子邮件：patrick@nfl.com，电话：1234），
{姓名：“汤姆·布雷迪”，扇区：“四行背包”，电子邮件：tom@nfl.com，电话：5678），
{姓名：“Julio Jones”，扇区：“宽接收器”，电子邮件：julio@nfl.com，电话：“9876”}
]
}
让配置={
栏目：[
{title:'Name'，field:'Name'}，
{标题：'扇区'，字段：'扇区'}，
{标题：“电子邮件”，字段：“电子邮件”}，
{标题：'Tel'，字段：'Tel'}
],
行动：[
{图标：“创建”，工具提示：“编辑”，onClick:（rowData）=>alert（'Edit'）}，
{图标：'lock'，工具提示：'Block'，onClick:（rowData）=>alert（'Block'）}，
{图标：'delete'，工具提示：'delete'，onClick:（rowData）=>alert（'delete'）}，
{图标：“可见性”，工具提示：“访问”，onClick:（rowData）=>alert（'Access'）}，
{图标：“添加框”，工具提示：“添加”，位置：“工具栏”，点击：（）=>{alert（'add'）}
],
选项：{
headerStyle:{color:'rgba（0,0,0,0.54）}，
actionsColumnIndex:-1，
是的，
是的，
页面大小：10，
页面大小选项：[]，
分页类型：“正常”
},
本地化：{
正文：{
emptyDataSourceMessage:“无数据”
},
工具栏：{
搜索工具提示：“搜索”，
searchPlaceholder:“搜索”，
exportTitle:“导出”
},
分页：{
labelRowsSelect:'行'，
labelDisplayedRows:“{count}项的{from}到{to}”，
第一个工具提示：“第一个”，
上一个工具提示：“上一个”，
nextTooltip:“下一个”，
lastTooltip:“上次”
},
标题：{
行动：“行动”
}
}
}
useffect（（）=>{
setChecked（prev=>！prev）；
异步函数loadUsers（）{
const response=await api.get（'/users'）；
table.data=response.data；
}
loadUsers（）；
}, [])
返回(
);
}
导出默认用户；

---

前面的示例将显示我固定在变量表上的3个用户。数据有4列（名称、扇区、电子邮件、电话）。

在一个功能组件中，每个渲染实际上是一个新的函数调用。因此，您在组件内声明并销毁和重新创建的任何变量。这意味着每次渲染时，

表

都会设置回初始值。即使您的

useffect

在第一次渲染后正确设置了它，它也将在下一次渲染时重置

这就是状态的用途：跟踪渲染之间的变量。用新的状态挂钩替换

let表

const[table，setTable]=useState({
数据：[
{姓名：“Patrick Mahomes”，扇区：“Quaterback”，电子邮件：patrick@nfl.com，电话：1234），
{姓名：“汤姆·布雷迪”，扇区：“四行背包”，电子邮件：tom@nfl.com，电话：5678），
{姓名：“Julio Jones”，扇区：“宽接收器”，电子邮件：julio@nfl.com，电话：“9876”}
]
});

然后像这样使用它：

useffect（（）=>{
setChecked（prev=>！prev）；
异步函数loadUsers（）{
const response=await api.get（'/users'）；
可设置（prev=>（{…prev，数据：response.data}）；
}
loadUsers（）；
}, [])

由于

表格.data

不是一个状态变量，因此每次组件呈现时，它都会按照最初声明的方式重新生成，这意味着当它作为组件的道具到达时，它将始终是相同的值（当您更改

表格.data

中

的值时，为时已晚）。您需要将
table.data
更改为状态变量，然后在
useffect
挂钩中，您可以将
table.data
的值更新为
response.data
。这将导致重新呈现组件，但会使用更新后的值

下面是一个示例，说明了如何做到这一点：

import React, { useState, useEffect } from 'react';
import { Fade } from "@material-ui/core";
import MaterialTable from 'material-table';
import { makeStyles } from '@material-ui/core/styles';

import api from '../../services/api.js';

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        width: '70%',
        margin: 'auto',
        marginTop: 20,
        boxShadow: '0px 0px 8px 0px rgba(0,0,0,0.4)'
    }
}));

function User(props) {
    const classes = useStyles();
    const [checked, setChecked] = useState(false);
    const [tableData, setTableData] = useState([]);


    let config = {
        columns: [
            { title: 'Name', field: 'name' },
            { title: 'Sector', field: 'sector' },
            { title: 'E-mail', field: 'email'},
            { title: 'Tel', field: 'tel'}
        ],
        actions: [
            { icon: 'create', tooltip: 'Edit', onClick: (rowData) => alert('Edit')},
            { icon: 'lock', tooltip: 'Block', onClick: (rowData) => alert('Block')},
            { icon: 'delete', tooltip: 'Delete', onClick: (rowData) => alert('Delete')},
            { icon: 'visibility', tooltip: 'Access', onClick: (rowData) => alert('Access')},
            { icon: "add_box", tooltip: "Add", position: "toolbar", onClick: () => { alert('Add') } }
        ],
        options: {
            headerStyle: { color: 'rgba(0, 0, 0, 0.54)' },
            actionsColumnIndex: -1,
            exportButton: true,
            paging: true,
            pageSize: 10,
            pageSizeOptions: [],
            paginationType: 'normal'
        },
        localization: {
            body: { 
                emptyDataSourceMessage: 'No data' 
            },
            toolbar: { 
                searchTooltip: 'Search',
                searchPlaceholder: 'Search',
                exportTitle: 'Export'
            },
            pagination: {  
                labelRowsSelect: 'Lines',
                labelDisplayedRows: '{from} to {to} for {count} itens',
                firstTooltip: 'First',
                previousTooltip: 'Previous',
                nextTooltip: 'Next',
                lastTooltip: 'Last'
            },
            header: {
                actions: 'Actions'
            }
        }
    }

    useEffect(() => {
        setChecked(prev => !prev);

        async function loadUsers() {
            const response = await api.get('/users');
            setTableData(response.data);
        }

        loadUsers();
    }, [])


    return (
        <>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

            <Fade in={checked} style={{ transitionDelay: checked ? '300ms' : '0ms' }}>
                <div className={classes.root}>
                    <MaterialTable editable={config.editable} options={config.options} localization={config.localization} title="Usuários" columns={config.columns} data={tableData} actions={config.actions}></MaterialTable>
                </div>
            </Fade>
        </>
    );
}

export default User;

import React，{useState，useffect}来自“React”；
从“@material ui/core”导入{Fade}”；
从“物料表”导入物料表；
从'@material ui/core/styles'导入{makeStyles}；
从“../../services/api.js”导入api；
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
宽度：“70%”，
页边空白：“自动”，
玛金托普：20，
boxShadow:'0px 0px 8px 0px rgba（0,0,0.4）'
}
}));
功能用户（道具）{
const classes=useStyles（）；
const[checked，setChecked]=使用状态（false）；
const[tableData，setTableData]=useState（[]）；
让配置={
栏目：[
{title:'Name'，field:'Name'}，