时间戳

首页 > 解决方案 > 如何将特定道具映射到状态？

javascript - 如何将特定道具映射到状态？

问题描述

我正在尝试将特定道具映射到brands状态。此外，不要添加brands状态中已经存在的值。

目标输出：

brands: [
  "IKEA",
  "Tesla"
]

我的尝试

const mapState = (state) => ({
  brands: state.products.forEach(product => {
    if (product.brands) {
      return product.brands;
    }
  })
});

export default connect(mapState)(Brands);

状态：

products: [
  {
    "id": 1,
    "title": "Pen",
    "brands": "IKEA"
  },
  {
    "id": 2,
    "title": "Flamethrower",
    "brands": "Tesla"
  },
  {
    "id": 3,
    "title": "T-shirt",
    "brands": "Tesla"
  }
]

标签： javascriptreact-nativereact-reduxstate

解决方案

您可以通过使用.reduce[1] 来构建一系列不同的产品来执行以下操作。

const mapState = (state) => ({
  brands: state
     .products
     .reduce((brands, product) => {
        if (!brands.includes(product.brands)) {
           return brands.concat([product.brands]);
        }
        return brands;
     }, [])
  })
});

export default connect(mapState)(Brands);

如果您需要在应用程序中重用它，您可以将检索不同的品牌提取到一个函数中：

function getProductBrands(products) {
   return products
     .reduce((brands, product) => {
        if (!brands.includes(product.brands)) {
           return brands.concat([product.brands]);
        }
        return brands;
     }, []);
}

参考文献：[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

推荐阅读