Javascript 使用ReactJs过滤电子商务站点中的性别

我对编程一无所知，我正在制作一个电子商务网站，如果可能的话，我必须按男性或女性过滤衣服的性别。 我正在使用react和redux

++++++++++++

 class ProductList extends Component {
    state = {
        slug: 'Products'
    }
    render() {
        return (
            <div className='itemlist'>
                {
                    this.props.theItems.items.map(item => <Product item={item}/>)
                }
            </div>
        )
    }
}
const mapStateToProps = state => {
    return{
         theItems: state.items
    }

}
export default connect(mapStateToProps)(ProductList)

---

您的问题缺少信息，但假设项目是具有

性别属性的产品，该属性可以是
男性
或
女性
，您可以这样做：

 class ProductList extends Component {
    state = {
        slug: 'Products'
    }
    render() {
        return (
            <div className='itemlist'>
                {
                    this.props.theItems.items
                         .filter(item => item.gender === 'Male')
                         .map(item => <Product item={item}/>)
                }
            </div>
        )
    }
}
const mapStateToProps = state => {
    return{
         theItems: state.items
    }

}
export default connect(mapStateToProps)(ProductList)

类ProductList扩展组件{
状态={
鼻涕虫：“产品”
}
render（）{
返回(
{
这个。道具。利润。项目
.filter（item=>item.gender=='Male'）
.map（项=>）
}
)
}
}
常量mapStateToProps=状态=>{
返回{
条目：state.items
}
}
导出默认连接（MapStateTops）（产品列表）

要了解该方法的工作原理，请查看有关该方法的文档。
请提供有关您要执行的操作的更多信息。这样就几乎不可能给出一个有建设性的答案。这实际上与您的代码无关，完全脱离主题。然而：从非二元和性别不一致的角度来看，在“女性、男性和中性”之间进行选择是很好的。对很多像我这样的人来说，总是在“男”和“女”之间做出选择是很烦人的。只是一个建议。：）你的包含性别信息的数据到底是什么样子的？我在问题中发布了我的数据，我必须在那里添加性别属性吗？

    items: [
            {
                id: uuid(),
                img: 'https://images.thejacketmaker.com/Men%27s+Noah+Black+Leather+Biker+Jacket1-4-1557058576770',
                title: 'Noah Black Leather Biker Jacket',
                description: '',
                price: '230'
            },
            {
                id: uuid(),
                img: 'https://images.thejacketmaker.com/Men%27s+Lavendard+Brown+Leather+Biker+Jacket7846-4-1577528725717.jpg',
                title: 'Lavendard Brown Leather Biker Jacket',
                description: '',
                price: '230'
            },
            {
                id: uuid(),
                img: 'https://images.thejacketmaker.com/Men%27s+Bomia+Ma-1+Brown+Leather+Bomber+Jacket7819-4-1579778569432.jpg',
                title: 'Bomia Ma-1 Brown Leather Bomber Jacket',
                description: '',
                price: '265'
            }


 class ProductList extends Component {
    state = {
        slug: 'Products'
    }
    render() {
        return (
            <div className='itemlist'>
                {
                    this.props.theItems.items
                         .filter(item => item.gender === 'Male')
                         .map(item => <Product item={item}/>)
                }
            </div>
        )
    }
}
const mapStateToProps = state => {
    return{
         theItems: state.items
    }

}
export default connect(mapStateToProps)(ProductList)