蕭十郎
2023-03-18 16:22:01
import React from "react";import productsData from "./products.js";import Product from "./Product.js";function App() { const arrrayOfImportedProducts = productsData.map((x) => ( <Product id={x.id} name={x.name} price={x.price} description={x.description} /> )); const array2 = arrrayOfImportedProducts.filter((y) => y.id != 1); return <div>{array2}</div>;}export default App;當(dāng)我運行代碼時,除了 .filter() 方法外,一切正常。每當(dāng)我使用 == 或 === 過濾特定元素時,它都會給我一個空白屏幕。當(dāng)我使用 !== 或 !=== 時,它會向我顯示 array2 的所有元素,包括不應(yīng)該在其中的元素。為什么它不起作用?
1 回答

瀟瀟雨雨
TA貢獻1833條經(jīng)驗 獲得超4個贊
由于您首先進行映射,然后進行過濾,因此您的過濾函數(shù)正在檢查.id反應(yīng)元素的屬性。React 元素沒有 id 屬性。因此,由于 id 永遠不會匹配,您的代碼!==將始終通過,因此所有內(nèi)容都包含在內(nèi)。如果你使用則相反===:它永遠不會通過,所以什么都不包括在內(nèi)。
您將需要切換代碼的順序:
function App() {
const filteredProducts = arrrayOfImportedProducts.filter((y) => y.id != 1);
const arrrayOfImportedProducts = filteredProducts.map((x) => (
<Product
id={x.id}
name={x.name}
price={x.price}
description={x.description}
/>
));
return <div>{arrrayOfImportedProducts}</div>;
}
添加回答
舉報
0/150
提交
取消