如何将特定的 props 映射到 state？

Question

我正在尝试将特定的道具映射到状态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"  }]

Answer 1

.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

Answer 2

forEach不返回任何内容。您可以做的是创建一个函数getAllProductBrands并调用该函数。然后，此函数应返回所有品牌的列表。

const getAllProductBrands = (products) => {

  const brands = [];

  products.forEach(product => {

    if(!brands.some(brand => brand === product.brand) {

      brands = [...brands, product.brand];    

    };

  });

};

然后你可以在你的mapState中调用这个函数。

const mapState = (state) => ({

  brands: getAllProductBrands(state.products)

});

Answer 3

获取唯一的品牌列表

const mapState = ({products}) => {

  const brands = [...new Set( products

     .map(product => product.brands))];

  return { brands }

};