javascript - 我如何遍历 react.js 中的对象数组并在对象中添加价格值，如下所示

Question

const data = [
    {
        id: 1,
        title: "buttermilk pancakes",
        category: "fullstack",
        price: 15.99,
        img: "./img/item-1.jpeg",
        desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
    },
    {
        id: 2,
        title: "diner double",
        category: "backend",
        price: 13.99,
        img: "./img/item-2.jpeg",
        desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
    },
];

export default data;

在这里，我使用 map 遍历了对象，但返回的结果显示了迭代的价格总和。
我还使用了 JavaScript 函数 reduce，但也没有用。

const Test = () => {
    let sum = 0;
    return (
        <div>
            {data.map((items) => {
                const values = items.price;
                sum = values + sum;
                console.log(Math.max(sum));
                const { id } = items;
                return (
                    <div key={id}>
                        <p>{sum}</p>
                    </div>
                );
            })}
        </div>
    );
};

如何使用 react 获得价格的总值(value)？

Answer 1

您可以使用reduce实现这个功能

data.reduce((sum, p)=> sum+p.price, 0);

您可以在组件中使用它

const Test = ()=> {
    return <div>{data.reduce((sum, p)=> sum+p.price, 0);}</div>
 }