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

如何解决设置 ID 如果在 React 中的数组中找到

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

中找到了 productsList 的 ID

预期产出

[
    "AAA"
]

产品列表

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

选择的产品

[
    "AAA","DDD"
]

代码

setProducts([])

解决方法

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

,

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

Array.prototype.includes 那些位于 selectedProducts 中的 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);

,

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

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

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

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)

,

使用 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)

快乐编码:)