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

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>
    );
};

placement.json -- 我正在尝试将我的结果添加到这个 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
}]

delivery.json - 这个 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}>

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

对于您的展示数据，这很容易。您可以将其保留为两个单独的数组，一个接一个地引用（前提是数据的顺序相同），也可以创建一个组合两者的新数组。

两个数组

const impSum = delivery.reduce((i, {
    placement_id,
    impressions
}) => (i[placement_id] = (i[placement_id] || 0) + impressions, i), {})

...

<TableBody>
    {advertData.map((data) => (

        <TableRow key={data.id}>
            <TableCell> {data.name}</TableCell>
            <TableCell> {data.start}</TableCell>
            <TableCell> {data.end}</TableCell>
            <TableCell> {impSum[data.id]}</TableCell>
            <TableCell> {data.cpm}</TableCell>

        </TableRow>
    ))}
</TableBody>

第三个新数组

const impSum = delivery.reduce((i, {
    placement_id,
    impressions
}) => (i[placement_id] = (i[placement_id] || 0) + impressions, i), {})

const data = placements.map((placement, index) => ({
  ...placement,
  impression: impSum[placement.id]
}))

...

<TableBody>
    {data.map((placement) => (

        <TableRow key={placement.id}>
            <TableCell> {placement.name}</TableCell>
            <TableCell> {placement.start}</TableCell>
            <TableCell> {placement.end}</TableCell>
            <TableCell> {placement.impression}</TableCell>
            <TableCell> {placement.cpm}</TableCell>

        </TableRow>
    ))}
</TableBody>