如何将对象添加到现有的对象数组

Question

我正在努力尝试从 reduce 方法中获取新数据并将其添加到现有的对象数组中。 我已经使用 reduce 方法添加了 delivery.json 中的所有印象。 我想要做的是将它添加到placements.json 而不更改实际文件。 然后映射到新数组。

这是我在控制台中可以看到的内容：

到目前为止，这是我的代码中的内容：

 // import PlacementData from './components/Placements' import { Container, TableContainer, Table, TableHead, TableCell, TableBody, TableRow, Paper } from '@mui/material' export const Main = ({ delivery, placements }) => { const header = ["Name", "Start Date", "End Date", "Impressions", "CPM", "Final Cost"] const impSum = delivery.reduce((i, { placement_id, impressions }) => (i[placement_id] = (i[placement_id] || 0) + impressions, i), {}) let impSumArr = [{ impression: impSum }] const advertData = [...impSumArr, ...placements] console.log(advertData); console.log(impSumArr); return ( <main> {/* HEADER */} <Container> <TableContainer component={Paper} > <Table> <TableHead> <TableRow> {header.map((head => { return <TableCell> {head}</TableCell> }))} </TableRow> </TableHead> {/* BODY */} <TableBody> {advertData.map((data) => ( <TableRow key={data.id}> <TableCell> {data.name}</TableCell> <TableCell> {data.start}</TableCell> <TableCell> {data.end}</TableCell> <TableCell> { }</TableCell> <====== impressions here <TableCell> {data.cpm}</TableCell> </TableRow> ))} </TableBody> </Table> </TableContainer> </Container> </main> ); };

我正在尝试将我的结果添加到这个 Json 文件中：

 [{ "id": 1, "name": "Sports", "start": "11/1/20", "end": "11/30/20", "cpm": 5 }, { "id": 2, "name": "Business", "start": "12/1/20", "end": "12/31/20", "cpm": 8 }, { "id": 3, "name": "Travel", "start": "11/1/20", "end": "11/30/20", "cpm": 3 }, { "id": 4, "name": "Politics", "start": "12/1/20", "end": "12/31/20", "cpm": 6 }]

这个 Json 文件非常大，我删掉了很多，但我在我的 impSum 变量中添加了所有具有相同“placement_id”的“印象”数字：

 [ { "placement_id": 1, "date": "11/1/2020", "impressions": 33427 }, { "placement_id": 1, "date": "11/2/2020", "impressions": 30311 }, { "placement_id": 1, "date": "11/3/2020", "impressions": 38048 }, { "placement_id": 1, "date": "11/4/2020", "impressions": 32167 }, { "placement_id": 1, "date": "11/5/2020", "impressions": 38673 }, { "placement_id": 2, "date": "11/6/2020", "impressions": 34793 }, { "placement_id": 2, "date": "11/7/2020", "impressions": 39949 }, { "placement_id": 2, "date": "11/8/2020", "impressions": 37360 }, { "placement_id": 3, "date": "11/9/2020", "impressions": 39987 }, { "placement_id": 3, "date": "11/10/2020", "impressions": 37955 }, { "placement_id": 3, "date": "11/11/2020", "impressions": 31069 }, { "placement_id": 4, "date": "11/12/2020", "impressions": 37480 }, { "placement_id": 4, "date": "11/13/2020", "impressions": 38894 }, { "placement_id": 4, "date": "11/14/2020", "impressions": 36981 } ]

Answer 1

每当您使用Array.map返回 JSX 元素数组时，您都可以使用回调的第二个参数作为键（它是数组项索引）。

所以，你可以使用

advertData.map((data, index) =>
  <TableRow key={index}>

您需要对表格标题应用相同的模式。