如何将特定的 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 }};