在 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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn