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

Question

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, data2, 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,2,5]，2：[1,2,2]

Answer 1

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

在这种情况下，您正在调用一个函数，该函数意味着 3 个单独的字符串/数字参数与一个数组，然后尝试访问 JSX 中不存在的对象属性，如果它甚至达到那么远，因为我'我不确定将数组解构为对象键会做什么。

values 属性中的值是什么？

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

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


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

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