首頁 > web前端 > js教程 > 主體

在React專案中使用reduce、map和filter進行資料處理

WBOY
發布: 2024-08-28 06:10:32
原創
662 人瀏覽過

Memanfaatkan reduce, map, dan filter untuk Pengolahan Data dalam React Project

在我作為 Web 開發人員工作的大約 5 年裡,這 3 個陣列函數是我最常使用的來管理資料和與陣列互動的函數。對於React專案本身來說,這3個陣列函數對於資料處理來說是非常強大的,這裡或多或少的介紹了這3個函數的有效用法。

renderList 的映射

import React from 'react';

const users = ['Alice', 'Bob', 'Charlie'];

function UserList() {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

export default UserList;

登入後複製

用於條件渲染的濾波器

import React from 'react';

const users = ['Al', 'Bob', 'Charlie'];

function UserList() {
  const filteredUsers = users.filter(user => user.length > 3);

  return (
    <ul>
      {filteredUsers.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

export default UserList;
登入後複製

減少計算數據

import React from 'react';

const products = [
  { id: 1, name: 'Laptop', price: 1500 },
  { id: 2, name: 'Phone', price: 800 },
  { id: 3, name: 'Tablet', price: 1200 }
];

function TotalPrice() {
  const totalPrice = products.reduce((acc, product) => acc + product.price, 0);

  return (
    <div>
      <h2>Total Price: ${totalPrice}</h2>
    </div>
  );
}

export default TotalPrice;

登入後複製

在 React 中結合映射、過濾器和歸約

import React from 'react';

const products = [
  { id: 1, name: 'Laptop', price: 1500, discount: 200 },
  { id: 2, name: 'Phone', price: 800, discount: 50 },
  { id: 3, name: 'Tablet', price: 1200, discount: 100 }
];

function DiscountedProducts() {
  const discountedProducts = products.filter(product => product.discount > 0);
  const totalDiscount = discountedProducts.reduce((acc, product) => acc + product.discount, 0);

  return (
    <div>
      <h2>Total Discount: ${totalDiscount}</h2>
      <ul>
        {discountedProducts.map(product => (
          <li key={product.id}>{product.name} - Discount: ${product.discount}</li>
        ))}
      </ul>
    </div>
  );
}

export default DiscountedProducts;

登入後複製

結論

在React應用程式中,map、filter和reduce不僅是操作資料的工具,也是動態、有效率地渲染UI的方法。透過理解和掌握這些功能,我們可以創建更模組化、易於閱讀和可擴展的應用程式。因此,在我們的 React 專案中繼續探索和實現這些功能以獲得最大結果

以上是在React專案中使用reduce、map和filter進行資料處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板