Question

我有一个先过滤后映射的产品数组，此方法可以正常工作，但我想将结果推送到一个新数组中这样我就可以对结果进行排序或检查是否没有返回结果

我试图将concat的映射结果放入一个新数组，但是我得到了Uncaught TypeError: Cannot read property 'concat' of undefined

class ProductsList extends React.Component {
  state ={
    filteredProducts: []
  }
  render() {
    const { e, p, filteredColors, filteredSizes, filteredProducts,  match, products } = this.props
    return(
      <Section>
        <Container>
          <Grid>

            {products && products.filter(products =>
            (
              (filteredColors.length >= 1 && filteredSizes.length < 1 && products.cat === match.params.subCatId) && filteredColors.includes(products.color) ||
              (filteredSizes.length >= 1 && filteredColors.length < 1 && products.cat === match.params.subCatId) && filteredSizes.includes(products.size) ||

              (filteredSizes.length >= 1 && filteredColors.length >= 1 && products.cat === match.params.subCatId) && filteredColors.includes(products.color) && filteredSizes.includes(products.size)) ||
              (filteredSizes.length < 1 && filteredColors.length < 1 && products.cat === match.params.subCatId)
            )
            .map(product =>
              <div>
              {filteredProducts.concat(product.id)}
              {console.log(filteredProducts)}
              </div>
              // <Cell key={product.id}>
              //     <ProductListCard e={e} p={p} match={match}{...product} />
              // </Cell>
            )}
          </Grid>
        </Container>
        <Filters>
          <Filter />
        </Filters>
      </Section>
    )
  }
}

export default ProductsList

Answer 1

我已将过滤器定义为const filteredProducts，因此现在可以通过此变量访问结果

class ProductsList extends React.Component {

  render() {
    const { e, p, filteredColors, filteredSizes,  match, products } = this.props
    const filteredProducts = products && products.filter(products =>
      (
        (filteredColors.length >= 1 && filteredSizes.length < 1 && products.cat === match.params.subCatId) && filteredColors.includes(products.color) ||
        (filteredSizes.length >= 1 && filteredColors.length < 1 && products.cat === match.params.subCatId) && filteredSizes.includes(products.size) ||

        (filteredSizes.length >= 1 && filteredColors.length >= 1 && products.cat === match.params.subCatId) && filteredColors.includes(products.color) && filteredSizes.includes(products.size)) ||
        (filteredSizes.length < 1 && filteredColors.length < 1 && products.cat === match.params.subCatId)
      )
      console.log(filteredProducts)
    return(
      <Section>
        <Container>
          <Grid>
            {filteredProducts && filteredProducts.map(filteredProduct =>
              <Cell key={filteredProduct.id}>
                <ProductListCard e={e} p={p} match={match}{...filteredProduct} />
              </Cell>
            )}
          </Grid>
        </Container>
        <Filters>
          <Filter />
        </Filters>
      </Section>
    )
  }
}

Answer 2

要过滤并映射到新数组中，可以使用reduce

const filterMap = (array, condition, transform) =>
  array ?
        array.reduce((results, item) => (condition(item) ? [...results, transform(item)] : results), [])
        : array;

现在，您具有filterMap函数，该函数将在一次迭代中返回一个新数组，而不是两次。

过滤并将结果映射到新数组

2 个答案: