在本文中，我們將學(xué)習(xí)如何輕松地從React中的狀態(tài)數(shù)組中刪除項(xiàng)。

　　數(shù)組篩選器() 方法

　　要在 React 中從狀態(tài)數(shù)組中刪除項(xiàng)，請(qǐng)?jiān)跀?shù)組上調(diào)用 filter() 方法，指定數(shù)組中除要?jiǎng)h除的項(xiàng)之外的每個(gè)項(xiàng)都將通過(guò)的測(cè)試，然后使用 的結(jié)果 with 更新?tīng)顟B(tài)。

　　我們通過(guò)從回調(diào)返回一個(gè)條件來(lái)刪除帶有 的 fruit 對(duì)象，該條件僅適用于數(shù)組中沒(méi)有 2 的項(xiàng)。這樣做會(huì)從從 返回的數(shù)組中排除目標(biāo)項(xiàng)。

　　由于這里是一個(gè)函數(shù)式組件，我們使用 React 鉤子來(lái)創(chuàng)建初始狀態(tài)數(shù)組。第一個(gè)值返回允許我們?cè)L問(wèn)狀態(tài)數(shù)據(jù)。第二個(gè)值是用于更新?tīng)顟B(tài)的函數(shù)(通常稱為 )。我們將一個(gè)函數(shù)傳遞給(此處命名)以確保獲得當(dāng)前/最新?tīng)顟B(tài)。

　　提示： 當(dāng)根據(jù)當(dāng)前狀態(tài)數(shù)據(jù)計(jì)算新?tīng)顟B(tài)時(shí)，始終將函數(shù)傳遞給。setState

　　不要直接在 React 中修改狀態(tài)

　　請(qǐng)注意，嘗試通過(guò)使用如下函數(shù)直接修改項(xiàng)來(lái)從數(shù)組中刪除該項(xiàng)將不起作用：

　　狀態(tài)在 React 中是不可變的，因此我們無(wú)法通過(guò)改變數(shù)組來(lái)更新數(shù)組。它必須替換為從 返回的新數(shù)組，以便更新視圖。filter()

　　基于多個(gè)條件從狀態(tài)數(shù)組中刪除項(xiàng)

　　如果需要根據(jù)多個(gè)條件從狀態(tài)數(shù)組中刪除某個(gè)項(xiàng)，可以使用邏輯 AND (&&) 或邏輯 OR (&&) 運(yùn)算符。

　　使用邏輯 OR (||)算子

　　下面是使用邏輯 OR () 運(yùn)算符從狀態(tài)數(shù)組中刪除項(xiàng)的示例。

　　將一組操作數(shù)與運(yùn)算符組合在一起，如果至少有一個(gè)操作數(shù)的計(jì)算結(jié)果為 。通過(guò)將這個(gè)運(yùn)算符與該方法一起使用，我們返回一個(gè)新數(shù)組，該數(shù)組僅包含等于 或 的水果對(duì)象。||truetruefilter()name'Orange''Apple'

　　使用邏輯和 (&&) 運(yùn)算符

　　下面是使用邏輯 AND () 運(yùn)算符從狀態(tài)數(shù)組中刪除項(xiàng)的示例：

　　僅當(dāng)所有操作數(shù)都為 時(shí)，操作數(shù)與運(yùn)算符組合才產(chǎn)生 。&&truetrue

　　通過(guò)將該方法與運(yùn)算符相結(jié)合，我們能夠指定一個(gè)復(fù)合布爾表達(dá)式，該表達(dá)式刪除帶有 和 的水果對(duì)象。filter()&&id24

　　使用德摩根定律簡(jiǎn)化復(fù)合布爾表達(dá)式

　　我們可以使用德摩根定律之一將前面的例子中的 AND 條件轉(zhuǎn)換為 OR 條件，并減少否定的次數(shù)。

　　這種轉(zhuǎn)換可以使表達(dá)式更易于閱讀和理解。