如何排列对象数据的嵌套数组以用于反应表组件显示

问题描述 投票:1回答:1

我有这个可重用的组件adminTable

const AdminTable=(props)=>{
    const classes = useStyles();
  console.log(props);
    return(<TableContainer component={Paper}>
        <Typography className="typo-table" variant="h5">{props.heading}</Typography>
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell className="table-head">S/N</TableCell>
              {props.tableHeading.map(item=>(<TableCell className="table-head" key={item} align="left"> {item}</TableCell>))}
              <TableCell className="table-head" align="left">Options</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
          {props.displayedResult.map((row, i) => (
              <TableRow key={row.id}>
                <TableCell component="th" scope="row">
                  {i+1}
                </TableCell>
                {props.tableDataKey.map((cell)=>(<TableCell key={cell} align="left">{row[cell]}</TableCell>))}
                <TableCell align="left"><CustomNavlinkAction to={"/admin/applicant/"+row.userId} /></TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>)

}

export default AdminTable;

并且该组件将在下面的组件AdminPageWrapper中使用

const displayedResult = [
  {
    createdAt: 1584972020777,
    updatedAt: 1584972020777,
    id: 1,
    userId: 1,
    comment: "Let's archive this",
    createdBy: 2,
    info: {
      createdAt: 1584962612534,
      updatedAt: 1584972020767,
      id: 1,
      fullName: 'John Doe',
      phone: '+2348079821739',
      location: 'Ilorin',
      age: 23,
      email: '[email protected]',
      gender: 'Male',
      userId: 1,
      processed: true
    }
  }
];
const tableHeading = ["Name", "Email", "Phone", "Comments", "Added by", "Date"];

const tableDataKey = ['info.fullname', 'info.email', 'info.phone', 'comment', 'createdBy', 'createdAt' ];

<AdminTable heading={heading} displayedResult={displayedResult} tableHeading={tableHeading} tableDataKey={tableDataKey} />

下面是我在组件中输出的结果enter image description here

如何重构代码以确保姓名,电子邮件和电话显示?

javascript reactjs
1个回答
0
投票

A。如果子对象内没有重复的键

© www.soinside.com 2019 - 2024. All rights reserved.