我如何迭代react.js中的物件陣列并在物件中添加價格的值，如下所示

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

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

uj5u.com熱心網友回復：

您可以使用reduce函式來實作此目的

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

您可以在組件中使用它

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

uj5u.com熱心網友回復：

請參考此代碼，它可能對您的代碼有所幫助

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

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

uj5u.com熱心網友回復：

您可以簡單地使用forEach而不是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>

uj5u.com熱心網友回復：

做這個：

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

標籤：javascript 反应

上一篇：為什么我的回應使用正確的資料執行不止一次，而不是使用useEffect()只執行一次？

下一篇：為什么nodejs在其核心模塊中隨意使用魔法字串？