Reactjs 基于表组件中的输入在react js中创建dict的动态列表

我正在尝试从表组件创建字典列表，目前我能够创建以键作为索引的字典，但无法弄清楚如何创建 它可以在字典行列表中转换。 （表的第一行为键，其他行为值）

以下是沙盒链接，以便更好地理解：

import React，{Fragment，useState}来自'React'；
//物料ui导入
从“@material ui/core/styles”导入{fade，withStyles}”；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/InputBase”导入InputBase；
从“@material ui/core/TextField”导入TextField；
const useStyles=makeStyles({
表:{
最小宽度：650
}
});
const BootstrapInput=带有样式（（主题）=>({
根目录：{
“标签+&”：{
marginTop：主题。间距（3），
},
},
输入：{
边界半径：4，
位置：'相对'，
背景色：theme.palette.common.white，
边框：“1px实心#ced4da”，
尺寸：16，
宽度：“60%”，
填充：“5px 6px”，
过渡：theme.transitions.create（['border-color'，'box-shadow']），
“&：焦点”：{
boxShadow:`${fade（theme.palete.primary.main，0.25）}0.2rem`，
borderColor:theme.palette.primary.main，
},
},
}))（输入基）；
导出默认函数DataTabelVariable（）{
//桌子
const classes=useStyles（）；
常量[rowValue，setRowValue]=useState（0）；
const[columnsValue，setColumnsValue]=useState（0）；
const[tableCellsData，setTableCellsData]=useState（）；
//const[key，setKey]=useState（[]）；
//常量[value，setValue]=useState（[]）
//var-dic={}；
//dict[new_key]=新_值；
const getUniqueKeyFromArrayIndex=（rowNum，columnNum）=>{
返回`${rowNum}-${columnNum}`；
};
const onChangeHandler=（e）=>{
日志（e.target.name，e.target.value）；
可设置单元格数据({
…表格CellsData，
[e.target.name]：e.target.value
});
};
//const onChangeHandler=（e）=>{
//可设置单元格数据(
//         {
//…表格CellsData，
//[e.target.name]：e.target.value
//         }
//     );
//日志（e.target.name，e.target.value）；
//让splitVariable=e.target.name.split（'-'））
//if（拆分变量[0]=“0”）{
//console.log（splitVariable[1]）
//setKey（…key，key[splitVariable[1]]=e.target.value）
//     }
//else if（拆分变量[0]！=“0”）{
//setValue（…值，键[splitVariable[0]]=e.target.value）
//     }
// };
//console.log（键）
//console.log（值）
const generateTable=（）=>{
设table=[]；
//创建父对象的外部循环
for（设i=0；i
setColumnsValue（e.target.value）}variant=“概述”/>


{generateTable（）}
)
}

import React, { Fragment, useState } from 'react';
// Material-ui imports
import { fade, withStyles } from '@material-ui/core/styles';
import { makeStyles } from "@material-ui/core/styles";
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 TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import InputBase from "@material-ui/core/InputBase";
import TextField from '@material-ui/core/TextField';
const useStyles = makeStyles({
    table: {
        minWidth: 650
    }
});
const BootstrapInput = withStyles((theme) => ({
    root: {
        'label + &': {
            marginTop: theme.spacing(3),
        },
    },
    input: {
        borderRadius: 4,
        position: 'relative',
        backgroundColor: theme.palette.common.white,
        border: '1px solid #ced4da',
        fontSize: 16,
        width: '60%',
        padding: '5px 6px',
        transition: theme.transitions.create(['border-color', 'box-shadow']),
        '&:focus': {
            boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
            borderColor: theme.palette.primary.main,
        },
    },
}))(InputBase);

export default function DataTabelVariable() {
    // Table
    const classes = useStyles();
    const [rowValue, setRowValue] = useState(0);
    const [columnsValue, setColumnsValue] = useState(0);
    const [tableCellsData, setTableCellsData] = useState();
    // const [key, setKey] = useState([]);
    // const [value, setValue] =useState([])
    // var dic = {};
    // dict[new_key] = new_value;

    const getUniqueKeyFromArrayIndex = (rowNum, columnNum) => {
        return `${rowNum}-${columnNum}`;
    };
    const onChangeHandler = (e) => {
        console.log(e.target.name, e.target.value);
        setTableCellsData({
            ...tableCellsData,
            [e.target.name]: e.target.value
        });
    };


    // const onChangeHandler = (e) => {
    //     setTableCellsData(
    //         {
    //             ...tableCellsData,
    //             [e.target.name]: e.target.value
    //         }

    //     );
    //     console.log(e.target.name, e.target.value);
    //     let splitVariable = e.target.name.split('-')
    //     if (splitVariable[0] === "0") {
    //         console.log(splitVariable[1])
    //         setKey(...key,key[splitVariable[1]] = e.target.value)  
    //     }
    //     else if (splitVariable[0]!=="0") {
    //       setValue( ...value ,key[splitVariable[0]] =  e.target.value)
    //     }
    // };
// console.log(key)
// console.log(value)
    const generateTable = () => {
        let table = [];
        // Outer loop to create parent
        for (let i = 0; i < rowValue; i++) {
            let children = [];
            //Inner loop to create children
            for (let j = 0; j < columnsValue; j++) {
                children.push(
                    <td>
                        <BootstrapInput
                            name={getUniqueKeyFromArrayIndex(i, j)}
                            onChange={onChangeHandler}
                        />
                    </td>
                );
            }
            table.push(
                <TableRow key={i}>
                    <TableCell>{children}</TableCell>
                </TableRow>
            );
            console.log(tableCellsData);
        }
        return table;
    };


    return (
        <Fragment>
            <div>
                <h5>Select Row number and Columns number</h5>
                <div className={"rowColumnsNumber"} style={{ marginTop: 20 }}>
                    <TextField id="Row-number" label="Row(s)" type="number" InputLabelProps={{ shrink: true, }} inputProps={{ min: "0", max: "1000", step: "1" }} onChange={(e) => setRowValue(e.target.value)} variant="outlined" />
                    <TextField id="Columns-number" label="Columns(s)" type="number" inputProps={{ min: "0", max: "1000", step: "1" }} InputLabelProps={{ shrink: true, }} onChange={(e) => setColumnsValue(e.target.value)} variant="outlined" />
                </div>
                <br />
                <div className={"TableContainer"}>
                    <TableContainer component={Paper}>
                        <Table className={classes.table} aria-label="simple table">
                            <TableBody>{generateTable()}</TableBody>
                        </Table>
                    </TableContainer>
                </div>
            </div>
        </Fragment>
    )

}