在 React 中過濾列表

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中處理外部資料
  2. React 中的內聯資料過濾
  3. React 中更具可讀性的資料過濾
在 React 中過濾列表

React 是一個前端庫,它使用可重用元件構建漂亮的介面。但是,UI 元素需要填充實際的資訊、視覺、音訊或其他內容。

大多數內建在 React 中的應用程式通過 API 從後端伺服器接收資料。

在 React 中處理外部資料

在你可以使用資料來填補元件中的空白之前,你必須首先將其儲存在應用程式的本地狀態中。

有時,父元件接收並儲存資料並通過 props 將其傳遞給其子元件。從 API 接收的資料結構因資料型別和其他因素而異。

在開發應用程式時,接收物件陣列並不罕見,你必須根據該資料建立 UI 元素。

例如,你可能會收到描述產品的資料,你的工作就是建立可重用的元件,這些元件接受原始資料作為輸入並將其顯示為產品列表。

在某些情況下,你只想有條件地顯示某個資料子集。例如,如果我們繼續產品示例,你可能不想顯示缺貨產品。

你可以使用 ES6 中引入的 .filter() 陣列方法來設定條件並僅顯示滿足該條件的產品。

如果你決定使用 .filter() 方法,你將進行客戶端過濾。或者,你可以過濾伺服器上的資料並獲取已過濾的資料。

React 中的內聯資料過濾

讓我們繼續我們的產品資料示例,想象我們元件的狀態包含一組描述單個產品的物件——價格、名稱、描述和可用性。

讓我們看一個例子:

export default function App() {
  const [productData, setProductData] = useState([
    {
      price: 10,
      name: "Apple",
      description: "Tasty fruit!",
      available: true
    },
    {
      price: 15,
      name: "Pear",
      description: "Juicy pear straight from the farm",
      available: true
    },
    {
      price: 8,
      name: "Banana",
      description: "Banana from the tropics",
      available: false
    }
  ]);
  return (
    <div className="App">
      {productData
        .filter((product) => product.available === true)
        .map((fruit) => (
          <h2>
            {fruit.name} - {fruit.price + "$"}
          </h2>
        ))}
    </div>
  );
}

這裡有很多東西要解開。首先,我們將產品資料儲存在 productData 狀態變數中,預設情況下,該變數設定為作為引數傳遞給 useState() 掛鉤的值。

之後,在開始和結束 <div> 標記之間有一段棘手的程式碼。讓我們解釋一下花括號。

我們使用它們來告訴 JSX 大括號之間的程式碼應該被解釋為 JavaScript 表示式,而不是純 HTML。在這種情況下,我們在 productData 陣列上呼叫 filter() 方法,因此大括號是必需的。

下一步是為 .filter() 方法編寫一個回撥函式。這是我們設定條件來過濾列表的地方。

在這種情況下,我們的回撥接受一個具有任意名稱 product 的引數。它可以是其他任何東西,並檢查物件的 available 屬性是否為真。

最終,.filter() 方法將返回一個新陣列,由原始陣列中滿足條件的項組成。

這就是為什麼我們在 .filter() 方法的結果上呼叫 .map() 方法。我們想要獲取每個陣列項並將它們的值顯示為 <h2> 文字。

你可以使用程式碼並檢查 CodeSandbox 上的輸出。

React 中更具可讀性的資料過濾

如果你認為上述解決方案過於複雜且難以理解,那麼你並不孤單。為了使你的程式碼更具可讀性,你可以在 JSX 之外建立一個新變數 filteredFruits,並使用它來儲存過濾後的值。

然後你可以在過濾後的陣列上呼叫 .map(),JSX 中的程式碼看起來會更乾淨。讓我們看一個例子:

export default function App() {
  const [productData, setProductData] = useState([
    {
      price: 10,
      name: "Apple",
      description: "Tasty fruit!",
      available: true
    },
    {
      price: 15,
      name: "Pear",
      description: "Juicy pear straight from the farm",
      available: true
    },
    {
      price: 8,
      name: "Banana",
      description: "Banana from the tropics",
      available: false
    }
  ]);
  const filteredProducts = productData.filter((product) => product.available === true)
  return (
    <div className="App">
      {filteredProducts.map((fruit) => (
          <h2>
            {fruit.name} - {fruit.price + "$"}
          </h2>
        ))}
    </div>
  );
}

這種方法更簡潔,更容易理解,尤其是對於初學者。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn