在 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