将Json Array数据填充到材料UI React表中时出错

2024-05-20 • 问答

import React,{Component} from 'react';
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 TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
 const useStyles = makeStyles({
   root: {
     width: '100%',overflowX: 'auto',},table: {
    minWidth: 650,});
function createData(data1,data2,data3) {
return {data1,data3,};
}
export default function Simpletable(props) {
let rowval= props.values;
let rows = createData(rowval)
const classes = useStyles();
return (
  <Paper classname={classes.root}>
    <Table classname={classes.table} aria-label="simple table">
      <TableHead>
        <TableRow>
          <TableCell>data1</TableCell>
          <TableCell align="right">data2</TableCell>
          <TableCell align="right">data3</TableCell>
      </TableRow>
      </TableHead>
      <TableBody>
        {rows.map(row => (
          <TableRow key={row.data1}>
            <TableCell component="th" scope="row">
              {row.data1}
            </TableCell>
            <TableCell align="right">{row.data2}</TableCell>
            <TableCell align="right">{row.data3}</TableCell>
          </TableRow>
         ))}
      </TableBody>
    </Table>
  </Paper>
);
}

我遇到以下错误：

react-dom.development.js?61bb:21810 The above error occurred in the <Simpletable> component:
    in Simpletable (created by Search)
    in div (created by Search)
    in Search (created by App)
    in div (created by App)
    in App

我想知道如何实现此目标，请多加参考，并请从props.values的api数据中找到示例动态来自子组件值0：[1,2,3]，1：[1,5]，2：[1,2]

看起来您的createData函数接受3个单独的参数，但是您以rowVal作为参数调用它，它来自props.values，我假设是一个数组？

在这种情况下，您要调用一个函数，该函数用于具有一个数组的3个单独的字符串/数字参数，然后尝试访问JSX中不存在的对象属性，即使它走得太远，因为我我不能完全确定将数组分解为对象键会做什么。

您的values道具中的值是什么？

编辑：要将values中的数组数组转换为对象数组，您需要遍历每个数组并从中返回一个对象。您已经有一个将值转换为对象的函数。您可以将其应用于每个数组，如下所示：

const createData = (data1,data2,data3) => {
    return { data1,dat3}
}


const rows = props.values.map((arr) => createData(...arr))

这会将数组的所有3个值作为参数散布到函数中。

将Json Array数据填充到材料UI React表中时出错

HELLO_JAVA521 回答：将Json Array数据填充到材料UI React表中时出错

大家都在问