我不太明白這個功能，比如你過濾掉什么以及它的作業方式......有人可以幫我解釋一下嗎？我是初學者，我需要你的幫助！順便說一句，非常感謝！
功能：
removeFromCart =(product) => {
const cartItems = this.state.cartItems.slice()
this.setState({
cartItems: cartItems.filter((x)=>x.id!==product.id)
})
}
uj5u.com熱心網友回復：
<button className="button" onClick={() => props.removeFromCart(item)}>
Remove
</button>
uj5u.com熱心網友回復：
這是該代碼的較長版本，您可能會感到困惑，因為您的版本有很多快捷方式和錯誤的變數名稱。（注釋）
removeFromCart = (product) => {
const cartItems = this.state.cartItems.filter((item) => {
return item.id !== product.id;
});
this.setState({
cartItems: t
})
}
讓我們知道這一點：
const cartItems = this.state.cartItems.slice()
首先，你不需要這個，因為它filter已經回傳一個新陣列，通常你slice用來創建該陣列的副本（部分）（通常我們在它上面傳遞引數，我很少看到開發人員將它用作“克隆”功能。您可以在此處閱讀有關它的更多資訊。
const cartItems = this.state.cartItems.filter((item) => {
return item.id !== product.id;
});
這一個，我改名為您的變數x進入item以使其更容易理解。由于cartItems是一個陣列，此函式將遍歷每個專案，然后創建一個新陣列，其中專案 id 與產品 id ( return item.id !== product.id) 不同。在此處閱讀有關過濾器的更多資訊
this.setState({
cartItems
})
你通過新創建的cartItems來更新你的狀態。
uj5u.com熱心網友回復：
在您的代碼中，該Array.prototype.slice函式用于創建狀態的副本，該副本cartItems是一個陣列。該Array.prototype.filter函式用于過濾陣列并僅回傳與傳遞給過濾函式的回呼函式中測驗的條件匹配的專案。
準確地說，您將cartItems陣列設定為等于一個陣列，該陣列只包含與作為函式引數的產品傳遞id不同的專案。idremoveFromCart
uj5u.com熱心網友回復：
有兩點需要注意。
- 首先，我們使用
slice()javascript的方法對陣列進行淺拷貝。這樣做是為了
我們不會改變原始狀態
（這是 React 的基本原則）
const cartItems = this.state.cartItems.slice(); // We have the copy of original state
我們可以用ES6 擴展運算子實作同樣的效果（在 React 中推薦）
const cartItems = [...this.state.cartItems];// This does the same what slice() does
第二部分是filter 方法中的邏輯，它是一個高階函式。
cartItems.filter((x)=>x.id!==product.id)
對于陣列中的每個專案（即陣列中的每個物件），此回呼函式運行
(x)=>x.id!==product.id
在每次迭代中并檢查item.id（即當前物件的 id）是否不等于所選的 Id。因此，所有專案都被過濾并顯示，除了產品 ID 與專案 ID 匹配的專案（此專案未在 DOM 中顯示）以及其他所有專案。
最后，您正在使用過濾后的專案更新您的狀態，因此您的功能按預期作業:)
建議您了解高階函式，例如map(), filter()，reduce()因為它們在 React 和 Javascript 框架中被大量使用，因為您是一個剛剛開始的人。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
uj5u.com熱心網友回復：
在您的Cart.js，您必須更改呼叫函式并傳遞專案，props.removeFromCart(item)}
<button
className="button"
onClick={() => props.removeFromCart(item)}
>
Remove
</button>
并在App.js，保持相同或，
removeFromCart = (product) => {
//const cartItems = this.state.cartItems.slice();
this.setState((prevState) => ({
cartItems: prevState.cartItems.filter((x) => x._id !== product._id)
}));
};
這正是需要做的事情，但它洗掉了選定的購物車元素
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/358399.html
標籤：javascript 反应 筛选