如果在 React 中的数组中找到，则设置 ID

Question

我有一个名为 productsList 的数组列表，还有一个名为 chosenProducts 的数组。我想在 setProducts 中查看是否在 productsList

中找到了 chosenProducts 的 ID

预期输出

[
    "AAA"
]

产品列表

[
    {
        "id": "AAA",
    },
    {
        "id": "BBB",
    },
]

chosenProducts

[
    "AAA",
    "DDD"
]

代码

setProducts([])

Answer 1

productsList.filter(product => chosenProducts.find(chosen => chosen === product.id)).map(product => product.id)

Answer 2

您可以 map and filter 使用 Array.prototype.reduce 和 Array.prototype.includes

中 chosenProducts 中的 productList 中的项目

var productList = [
    {
        "id": "AAA",
    },
    {
        "id": "BBB",
    },
]

var chosenProducts = [
    "AAA",
    "DDD"
]

var products = productList.reduce((acc, product) => {
  if(chosenProducts.includes(product.id)) {
     acc.push(product.id);
  }
 return acc;
}, []);
console.log(products);

Answer 3

对于这种情况，最好将您的产品列表更改为映射。您可以使用 JS 地图，并将所有数据保存在地图上，之后您可以使用 has 方法轻松检查列表中是否存在项目。

在这种解决方案中，时间复杂度将是 O(n) 而不是 O(n^2)。

const productList=  [
    {
        "id": "AAA",
    },
    {
        "id": "BBB",
    },
]

const coosenProducts = [
    "AAA",
    "DDD"
]

const mapping = new Set()

productList.forEach(item => mapping.add(item.id)) // O(n)

const result = coosenProducts.filter(item => mapping.has(item)) // O(n)

Answer 4

使用 filter() 和 includes() 将是实现目标的好方法。

代码如下：

const productList = [{"id": "AAA"}, {"id": "BBB"}]
const choosenProducts = ["AAA", "DDD"]

const result = productList.filter(product => {
    if (choosenProducts.includes(product.id)) return product
}).map(element => element.id)

setProducts(result)

编码愉快:)

如果在 React 中的数组中找到，则设置 ID

Set ID's If Found in Array in React

javascript

ecmascript-6

reactjs

ecmascript-2016

react-hooks