在本文中,我們將學習如何輕松地從React中的狀態(tài)數(shù)組中刪除項。
數(shù)組篩選器() 方法
要在 React 中從狀態(tài)數(shù)組中刪除項,請在數(shù)組上調(diào)用 filter() 方法,指定數(shù)組中除要刪除的項之外的每個項都將通過的測試,然后使用 的結(jié)果 with 更新狀態(tài)。
我們通過從回調(diào)返回一個條件來刪除帶有 的 fruit 對象,該條件僅適用于數(shù)組中沒有 2 的項。這樣做會從從 返回的數(shù)組中排除目標項。
由于這里是一個函數(shù)式組件,我們使用 React 鉤子來創(chuàng)建初始狀態(tài)數(shù)組。第一個值返回允許我們訪問狀態(tài)數(shù)據(jù)。第二個值是用于更新狀態(tài)的函數(shù)(通常稱為 )。我們將一個函數(shù)傳遞給(此處命名)以確保獲得當前/最新狀態(tài)。
提示: 當根據(jù)當前狀態(tài)數(shù)據(jù)計算新狀態(tài)時,始終將函數(shù)傳遞給。setState
不要直接在 React 中修改狀態(tài)
請注意,嘗試通過使用如下函數(shù)直接修改項來從數(shù)組中刪除該項將不起作用:
狀態(tài)在 React 中是不可變的,因此我們無法通過改變數(shù)組來更新數(shù)組。它必須替換為從 返回的新數(shù)組,以便更新視圖。filter()
基于多個條件從狀態(tài)數(shù)組中刪除項
如果需要根據(jù)多個條件從狀態(tài)數(shù)組中刪除某個項,可以使用邏輯 AND (&&) 或邏輯 OR (&&) 運算符。
使用邏輯 OR (||)算子
下面是使用邏輯 OR () 運算符從狀態(tài)數(shù)組中刪除項的示例。
將一組操作數(shù)與運算符組合在一起,如果至少有一個操作數(shù)的計算結(jié)果為 。通過將這個運算符與該方法一起使用,我們返回一個新數(shù)組,該數(shù)組僅包含等于 或 的水果對象。||truetruefilter()name'Orange''Apple'
使用邏輯和 (&&) 運算符
下面是使用邏輯 AND () 運算符從狀態(tài)數(shù)組中刪除項的示例:
僅當所有操作數(shù)都為 時,操作數(shù)與運算符組合才產(chǎn)生 。&&truetrue
通過將該方法與運算符相結(jié)合,我們能夠指定一個復合布爾表達式,該表達式刪除帶有 和 的水果對象。filter()&&id24
使用德摩根定律簡化復合布爾表達式
我們可以使用德摩根定律之一將前面的例子中的 AND 條件轉(zhuǎn)換為 OR 條件,并減少否定的次數(shù)。
這種轉(zhuǎn)換可以使表達式更易于閱讀和理解。