为什么 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

由于您首先进行映射，然后进行过滤，因此您的过滤函数正在检查.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>;

}