我如何遍历 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;

这里我使用地图遍历对象，但返回的结果显示迭代价格总和。我还使用了 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 获取价格的总值？

Answer 1

您可以使用 forEach 而不是 map 来简单地计算总价（因为 map 有自己的用例，比如创建新数组，而 forEach 对我们可用只是为了这个简单的迭代，就像在你的用例中一样）用一个像这样的单行：

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 `,
  }
];

var sum = 0;
data.forEach(subData => sum += subData.price);
console.log(sum) // return this `sum` value alone in your div tag below.

//return <div>{sum}</div>

Answer 2

你可以使用reduce函数来实现这个

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

您可以在您的组件中使用它

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

Answer 3

请参考这段代码，它可能对你的代码有帮助

const Test = () => {
    let sum = 0;
    data.forEach((item) => {
     sum = sum + item.price;
    });

    return(
     <div> {sum} </div>
    )
}

Answer 4

const Test = ()=> {
    var prices = data.map(({price})=> price).reduce((a, b)=> a+b, 0);
    return(
     <div>
         {prices}
     </div>
    )
 }

谢谢大家，我也试过了，成功了。在此处输入代码

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

How do i iterate over an array of object in react.js and add the values of prices in the object as shown below

javascript

jsx

reactjs