如何将reduce计算得到的数据添加到已有的对象数组中

你之前的代码核心问题是直接合并了求和结果数组和投放位数组，没有将每个投放位和对应的曝光量求和结果做关联，修正方案如下：

核心修改点 #

1. 保留你用reduce按placement_id分组求和的逻辑，这部分是正确的
2. 遍历placements数组生成新数组，为每个投放位对象新增对应的impressions属性（生成新对象不会修改原数组）
3. 补充Final Cost的计算逻辑，符合CPM（千次展示成本）的计算规则

修正后完整代码 #

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"]
    // 按placement_id分组求和曝光量
    const impSum = delivery.reduce((i, { placement_id, impressions }) => {
        i[placement_id] = (i[placement_id] || 0) + impressions
        return i
    }, {})
    // 生成关联了曝光量的新数组，不修改原placements数组
    const advertData = placements.map(placement => ({
        ...placement,
        // 匹配当前投放位id对应的曝光量，无数据默认0
        impressions: impSum[placement.id] || 0,
        // 计算最终成本：曝光量 * 千次成本 / 1000，可按需求调整保留小数位数
        finalCost: ((impSum[placement.id] || 0) * placement.cpm / 1000).toFixed(2)
    }))

    return (
        <main>
            <Container>
                <TableContainer component={Paper} >
                    <Table>
                        <TableHead>
                            <TableRow>
                                {header.map(head => <TableCell key={head}>{head}</TableCell>)}
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {advertData.map((data) => (
                                <TableRow key={data.id}>
                                    <TableCell>{data.name}</TableCell>
                                    <TableCell>{data.start}</TableCell>
                                    <TableCell>{data.end}</TableCell>
                                    <TableCell>{data.impressions}</TableCell>
                                    <TableCell>{data.cpm}</TableCell>
                                    <TableCell>{data.finalCost}</TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </TableContainer>
            </Container>
        </main>
    );
};

内容的提问来源于stack exchange，提问作者Kblack4290