我如何在 react.js 中遍歷 object 數組並在 object 中添加價格值，如下所示

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 遍歷了 object，但返回的結果顯示了迭代后的價格總和。 我還使用了 JavaScript function 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>
    );
};

我如何使用反應獲得價格的總價值？

Answer 1

您可以使用reduce function 來實現這一點

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

您可以在組件中使用它

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

Answer 2

您可以使用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 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>
    )
 }

謝謝大家，我也試過這個，它奏效了。 在此處輸入代碼

Answer 5

做這個：

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;
  for (const i of data) {
    sum = sum + i.id;
}


const Test = ()=> {
   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>
   )
}