Javascript 使用多维数组创建动态表并以状态存储数据

我是reactjs的noob，这个月我开始学习它，在这里我尝试创建useState变量，它以多维数组或数组的方式存储数据。此变量的输入来自动态表单元格，这些单元格是根据行号和列号创建的。 此链接已创建表部件，我面临在数组中存储数据的问题

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”，
过渡：主题。过渡。创建（[“边框颜色”，“框阴影]），
“&：焦点”：{
boxShadow:`${fade（theme.palete.primary.main，0.25）}0.2rem`，
边框颜色：theme.palete.primary.main
}
}
}))（输入基）；
导出默认函数DataTabelVariable（）{
//桌子
const classes=useStyles（）；
常量[rowValue，setRowValue]=useState（0）；
const[columnsValue，setColumnsValue]=useState（0）；
const[tableCellsData，setTableCellsData]=useState（）；
//const[jsonVar，setJsonVar]=useState（{}）；
//var dictVarKey={}；
//var dictVarValue={}；
//var jsonVar={}
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）=>{
//日志（e.target.name，e.target.value）；
可设置单元格数据({
…表格CellsData，
[e.target.name]：e.target.value
});
//console.log（Object.keys（tableCellsData））；
//for（表格CELLSDATA中的var键）{
//var值=tableCellsData[键]；
//const splitVar=key.split（“”）；
//if（parseInt（splitVar[0]，10）==0）{
//dictVarKey[splitVar[1]]=值；
//}else if（parseInt（splitVar[0]，10）>0）{
//dictVarValue[splitVar[1]]=值；
//   }
// }
//for（dictVarKey中的变量Kkey）{
//for（dictVarValue中的var Vkey）{
//如果（Kkey==Vkey）{
//jsonVar[dictVarKey[Kkey]=dictVarValue[Vkey]；
//     }
//   }
// }
//console.log（dictVarKey）；
//console.log（dictVarValue）；
//log（jsonVar）；
//for（设i=0；i
setColumnsValue（e.target.value）}
variant=“概述”
/>


{generateTable（）}
);
}

大部分工作已经完成。 如果希望在多维数组（本例中为2d）中维护表的数据，则name属性在这里可以帮助您，因为它表示由连字符分隔的行数和列数。 只需获取名称属性值，在连字符和中提琴上拆分即可！您将有行和列编号，之后您只需要使用它们来设置数组中的数据

---

我已经更新了。更新的代码在第74行和第84行之间

非常感谢，我太困惑了，看不到明显的部分..如何获取字典值列表，其中键位于第一行（标题）对不起，您能再澄清一点吗？我不确定你到底想知道什么？是否要基于列标题访问所有单元格值？也许您希望获得的值的一个示例会有所帮助。我希望变量（tableArrayData）具有以下格式的数据[{name:kartikeya，age:11}，{name:“Lakshya”，age:22}，{name:“something”，age:34}]，在当前代码中，我们有2d数组，其中第一行我将被视为键（name，age），其他行将是值（kartikeya，11）（Lakshya，22）…啊！谢谢你的澄清。现在它更有意义了。我已经更新了我写的一个附加函数，它可以将2d数组转换为字典，但是你可以轻松地优化代码，使其在同一个函数中工作，而不增加任何额外的开销。

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 [jsonVar, setJsonVar] = useState({});
  // var dictVarKey = {};
  // var dictVarValue = {};
  // var jsonVar = {}


  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) => {
    // console.log(e.target.name, e.target.value);
    setTableCellsData({
      ...tableCellsData,
      [e.target.name]: e.target.value
  });
    // console.log(Object.keys(tableCellsData));

    // for (var key in tableCellsData) {
    //   var value = tableCellsData[key];
    //   const splitVar = key.split("-");
    //   if (parseInt(splitVar[0], 10) === 0) {
    //     dictVarKey[splitVar[1]] = value;
    //   } else if (parseInt(splitVar[0], 10) > 0) {
    //     dictVarValue[splitVar[1]] = value;
    //   }
    // }

    // for (var Kkey in dictVarKey) {
    //   for (var Vkey in dictVarValue) {
    //     if (Kkey === Vkey) {
    //       jsonVar[dictVarKey[Kkey]] = dictVarValue[Vkey];
          
    //     }
    //   }
    // }
    // console.log(dictVarKey);
    // console.log(dictVarValue);
    // console.log(jsonVar);
    //   for (let i = 0; i<rowValue; i++){
    //     for (let j=0;j <columnsValue; j ++ ){

    //     }

    //   }
  };

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