如何排列對象數據的嵌套數組以進行反應表組件顯示

Question

我有這個可重用的組件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: 'john@mail.com', 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} />

下面是我在組件中的輸出結果

如何重構我的代碼以確保顯示姓名、電子郵件和電話？

Answer 1

A. 如果子對象內部沒有重復的鍵

您可以將顯示的對象直接平面化

const displayData = displayedResult.map(x => {
  const y = {...x, ...x.info};
  delete y.info;
  return y;
})

 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: 'john@mail.com', gender: 'Male', userId: 1, processed: true } } ]; const displayData = displayedResult.map(x => { const y = {...x, ...x.info}; delete y.info; return y; }) console.log(displayData[0])

然后像其他普通屬性一樣使用它們

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

---

B.如果有重復的key（你現在的情況）

您可以選擇用聯系人姓名替換它們以避免重復：

Object.keys(x.info).forEach(key => x.info['info.' + key] = x.info[key])

 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: 'john@mail.com', gender: 'Male', userId: 1, processed: true } } ]; const displayData = displayedResult.map(x => { Object.keys(x.info).forEach(key => x.info['info.' + key] = x.info[key]) const y = {...x, ...x.info}; delete y.info; return y; }) console.log(displayData[0])

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