为什么 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() {&nbsp; const filteredProducts = arrrayOfImportedProducts.filter((y) => y.id != 1);&nbsp; const arrrayOfImportedProducts = filteredProducts.map((x) => (&nbsp; &nbsp; <Product&nbsp; &nbsp; &nbsp; id={x.id}&nbsp; &nbsp; &nbsp; name={x.name}&nbsp; &nbsp; &nbsp; price={x.price}&nbsp; &nbsp; &nbsp; description={x.description}&nbsp; &nbsp; />&nbsp; ));&nbsp; return <div>{arrrayOfImportedProducts}</div>;}