reactJs中带有标题的动态表

我试图创建基于输入（行数和列数）的动态表，并将其值存储在字典变量列表中，其中键将是标题数据，值将是行数据

问题: 我无法将动态2d数组（tableArrayData）转换为表数据的字典列表（tableDictData）。 我试图为一行创建一个dictionary对象，但每次在行中输入内容时都会得到多个对象

我知道问题是btw 74到85，只是不确定这里能做些什么。。 沙盒链接：

import React，{Fragment，useState，useRef，useffect}来自“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”，
过渡：主题。过渡。创建（[“边框颜色”，“框阴影]），
“&：焦点”：{
boxShadow:`${fade（theme.palete.primary.main，0.25）}0.2rem`，
边框颜色：theme.palete.primary.main
}
}
}))（输入基）；
导出默认函数DataTabeVariable（props）{
//桌子
const classes=useStyles（）；
常量[rowValue，setRowValue]=useState（0）；
const[columnsValue，setColumnsValue]=useState（0）；
const[tableCellsData，setTableCellsData]=useState（）；
常量[tableArrayData]=useState（[[]）；
const[tableDictData]=useState（[]）；
//const header_row=[]；
const ref=useRef（null）；
const getUniqueKeyFromArrayIndex=（rowNum，columnNum）=>{
返回`${rowNum}-${columnNum}`；
};
const onChangeHandler=（e）=>{
可设置单元格数据({
…表格CellsData，
[e.target.name]：e.target.value
});
let[row，col]=e.target.name.split（“-”）；
行=parseInt（行，10）；
col=parseInt（col，10）；
如果（！tableArrayData[行]）{
tableArrayData[行]=[]；
tableArrayData[行]。推送（[]）；
//tableDictData[row].push（{}）；
}
tableArrayData[行][列]=e.target.value；
let header=tableArrayData[0]；
//穿过牢房
对于（变量i=1；i{
//console.log（tableArrayData.length）；
//console.log（tableArrayData[0]）；
console.log（tableDictData）
console.log（tableArrayData）；
}，[tableCellsData]）；
const generateTable=（）=>{
设table=[]；
//创建父对象的外部循环
设rowVariable=1；
rowVariable=rowValue+rowVariable；
//console.log（rowVariable）
for（设i=0；i
setColumnsValue（parseInt（e.target.value，10））}
variant=“概述”
/>


{generateTable（）}
{/*{generateTable（）}*/}
);
}

import React, { Fragment, useState, useRef, useEffect } 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(props) {
  // Table
  const classes = useStyles();
  const [rowValue, setRowValue] = useState(0);
  const [columnsValue, setColumnsValue] = useState(0);
  const [tableCellsData, setTableCellsData] = useState();
  const [tableArrayData] = useState([[]]);
  const [tableDictData] = useState([]);
  // const header_row = [];
  const ref = useRef(null);

  const getUniqueKeyFromArrayIndex = (rowNum, columnNum) => {
    return `${rowNum}-${columnNum}`;
  };

  
  const onChangeHandler = (e) => {
    setTableCellsData({
      ...tableCellsData,
      [e.target.name]: e.target.value
    });
    let [row, col] = e.target.name.split("-");
    row = parseInt(row, 10);
    col = parseInt(col, 10);

    if (!tableArrayData[row]) {
      tableArrayData[row] = [];
      tableArrayData[row].push([]);
      // tableDictData[row].push({});
    }
    tableArrayData[row][col] = e.target.value;
 

    let header = tableArrayData[0];
    // go through cells
    for (var i = 1; i < tableArrayData.length; i++) {
      var tableRow = tableArrayData[i];
      var rowData = {};
  
      for (var j = 0; j < tableRow.length; j++) {
        rowData[header[j]] =tableRow[j];
      }
  
      tableDictData.push(rowData);
    }

    // if (!tableArrayData[row]) {
    //   tableArrayData[row] = [];
    //   tableArrayData[row].push([]);
    // }
    // tableArrayData[row][col] = e.target.value;
    // props.value(tableArrayData)
  };


  useEffect(() => {
    // console.log(tableArrayData.length);
    // console.log(tableArrayData[0]);
    console.log(tableDictData)
    console.log(tableArrayData);
  }, [tableCellsData]);

  const generateTable = () => {
    let table = [];
    // Outer loop to create parent
    let rowVariable = 1;
    rowVariable = rowValue + rowVariable;
    // console.log(rowVariable)
    for (let i = 0; i < rowVariable; i++) {
      let children = [];
      //Inner loop to create children
      for (let j = 0; j < columnsValue; j++) {
        children.push(
          <td>
            {rowVariable === 1 ? (
              <BootstrapInput
                placeholder="header_value"
                name={getUniqueKeyFromArrayIndex(i, j)}
                onChange={onChangeHandler}
              />
            ) : (
              <BootstrapInput
                placeholder="row_value"
                name={getUniqueKeyFromArrayIndex(i, j)}
                onChange={onChangeHandler}
              />
            )}
          </td>
        );
      }
      table.push(
        <TableRow key={i}>
          <TableCell>{children}</TableCell>
        </TableRow>
      );
    }
    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(parseInt(e.target.value, 10))}
            variant="outlined"
          />
          <TextField
            id="Columns-number"
            label="Columns(s)"
            type="number"
            inputProps={{ min: "0", max: "1000", step: "1" }}
            InputLabelProps={{ shrink: true }}
            onChange={(e) => setColumnsValue(parseInt(e.target.value, 10))}
            variant="outlined"
          />
        </div>
        <br />
        <div className={"TableContainer"}>
          <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
              <TableBody ref={ref}>{generateTable()}</TableBody>
              {/* <TableBody> {generateTable()}</TableBody> */}
            </Table>
          </TableContainer>
        </div>
      </div>
    </Fragment>
  );
}