为什么Javascript.filter()不返回任何带有活动筛选器(==或===)的内容，但如果布尔逻辑类型为！=或者

Question

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;

当我运行代码时，除了.filter((方法外，其他一切都很好。每当我使用==或===来过滤特定元素时，它都会给我一个空白屏幕。当我使用！==或！===它向我展示了array2的所有元素，包括不应该在其中的元素。为什么它不起作用？

Answer 1

由于首先进行映射，然后进行过滤，因此过滤函数将检查react元素的.id属性。React元素没有id属性。因此，由于id永远不会匹配，所以带有!==的代码将始终通过，因此所有内容都包含在内。相反，如果使用===：它永远不会通过，因此不包含任何内容。

您需要切换代码的顺序：

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>;
}