Question

我正在尝试将productList上过滤器中的数据添加到我的redux状态filteredProducts

它几乎可以正常工作，它将添加已过滤项目的最后一个状态，但我不能完全将其与当前状态一起使用

如何更新它，以便将productFilter的当前状态更新为filteredProducts？

redux状态

产品：[]， filterProducts：[]

productList.js

class ProductsList extends React.Component {

  render() {
    const { e, p, filteredColors, filteredSizes,  match, products } = this.props
    const productFilter = this.props.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)
      )


    return(
      <Section>
        <Container>
          <Grid>
              <button onClick={()=>this.props.setFilteredProducts('adjda')}>djndnd</button>
            {productFilter && productFilter.map(filteredProduct =>
              <Cell key={filteredProduct.id}>
                <ProductListCard e={e} p={p} match={match} {...filteredProduct} />
              </Cell>
            )}
          </Grid>
        </Container>
        <Filters>
          <Filter productFilter={productFilter} handleUpdateFilter={this.handleUpdateFilter} />
        </Filters>
      </Section>
    )
  }
}

const mapStateToProps = state => ({
  filteredProducts: state.filteredProducts
});

export default connect(mapStateToProps, actionCreators)(ProductsList);

filter.js

class Filter extends React.Component {
  state = {
    showTab: ''
  }
  handleFilterColors = colorOption => {
    this.props.colors.includes(colorOption) ? this.props.removeColor(colorOption) : this.props.addColor(colorOption)
  }

  handleFilterSizes = sizeOption => {
    this.props.sizes.includes(sizeOption) ? this.props.removeSize(sizeOption) : this.props.addSize(sizeOption)
    this.props.setFilteredProducts(this.props.productFilter)
    console.log(this.props.productFilter)
  }

  handleShowTab = id => {
    const stateId = this.state.showTab
    this.setState({
      showTab: id === stateId ? false : id
    })
  }

  render() {
    const { colors, sizes, e, p } = this.props
    const colorOptions = ['gold', 'silver', 'bronze', 'platinum']
    const sizeOptions = ['7', '8', '9', '10']

    const { showTab } = this.state
    console.log(showTab)
    return(
      <Wrap>
        <ShowMobile>
          <Cell onClick={() => this.handleShowTab(1)}><FilterButton active={showTab === 1}>Filters</FilterButton></Cell>
          <Cell onClick={() => this.handleShowTab(2)}><FilterButton active={showTab === 2}>Sort by</FilterButton></Cell>
          {showTab === 1 &&
            <Bg>
            <FilterWrap>
                <FilterOptions>
                  <Title>Filter by Colour</Title>
                  {colorOptions.map((colorOption,index) =>
                    <FilterCell key={index}>
                      <ColorOption active={colors.includes(colorOption)}  onClick={()=> this.handleFilterColors(colorOptions[index])}>
                        {colorOption}
                        <Color />
                      </ColorOption>
                    </FilterCell>
                  )}
                </FilterOptions>
              </FilterWrap>

              <FilterWrap>
                <FilterOptions>
                  <Title>Filter by Size</Title>
                  {sizeOptions.map((sizeOption,index) =>
                    <FilterCell key={index}>
                      <ColorOption active={sizes.includes(sizeOption)} onClick={()=> this.handleFilterSizes(sizeOptions[index])}>
                        {sizeOption}
                        <Color />
                      </ColorOption>
                    </FilterCell>
                  )}
                </FilterOptions>
              </FilterWrap>

            </Bg>
          }


          {showTab === 2 &&
            <Bg>

            </Bg>
          }
        </ShowMobile>
        <ShowDesktop>
          <Cell>
            <DesktopGrid>
              <DesktopCell>
                <Title>sss</Title>
                <FilterWrap>
                  {colorOptions.map((colorOption,index) =>
                    <FilterCell key={index}>{colorOption}</FilterCell>
                  )}
                </FilterWrap>
              </DesktopCell>
              <DesktopCell>
                <Title>sss</Title>
                <FilterWrap>
                  {sizeOptions.map((sizeOption,index) =>
                    <FilterCell key={index}>
                      <SizeOption>
                        {sizeOption}
                      </SizeOption>
                    </FilterCell>
                  )}
                </FilterWrap>
              </DesktopCell>
            </DesktopGrid>
          </Cell>
          <Cell>

          </Cell>
        </ShowDesktop>


      </Wrap>
    )
  }
}

const mapStateToProps = state => ({
  colors: state.filters.colors,
  sizes: state.filters.sizes,
  filteredProducts: state.filteredProducts
})

export default connect(mapStateToProps, actionCreators)(Filter);

filterActions.js

export function setFilteredProducts(filteredProducts) {
  return {
    type: FILTERED_PRODUCTS,
    filteredProducts
  }
}

Answer 1

我已通过将productFIlter移至filter.js并检查componentDidUpdate中的过滤器是否发生更改来解决了此问题

filter.js

componentDidUpdate(prevProps) {
  const {filteredColors, filteredSizes,  match } = this.props
  const productFilter = this.props.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('product filter',productFilter)
    if(prevProps.filteredColors !== this.props.filteredColors || prevProps.filteredSizes !== this.props.filteredSizes) {
      this.props.setFilteredProducts(productFilter)
    }
}

使用已过滤的项目更新过滤器

1 个答案: