在ReactJS中，如何根据道具中传递的id号过滤渲染结果

我有一个具有catid道具（数字）的Navlink组件

{category.name}

因此它路由到另一个组件，有状态组件，如下所示：

 class ProductListFilter extends React.Component {
        constructor(props){
            super(props)
            this.state =  {
                ...props,
                cat: props.catid 
            }

        }

render() {
        const { addToCart, removeFromCart, products, cart} = this.props;         

        let filteredProds =  products.filter((item) => (
           item.cat_id === this.state.cat
        ))

        return <div className="products-list row mb-3">
            {
               filteredProds.map((product, index) => (
                    <ProductListItem
                    key={index}
                        product={product}
                        addToCart={addToCart}
                        removeFromCart={removeFromCart}
                        //cart={props.cart}
                        cartItem={cart.filter(cartItem => cartItem.id === product.id)[0]}
                    />

                )
                )}
        </div>
    }
}

类ProductListFilter扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
…道具，
猫：props.catid
}
}
render（）{
const{addToCart，removeFromCart，products，cart}=this.props；
让filteredProds=products.filter（（项目）=>(
item.cat_id==this.state.cat
))
返回
{
filteredProds.map（（产品、索引）=>(
cartItem.id==product.id）[0]}
/>
)
)}
}
}

不幸的是，它不起作用，我没有得到任何结果。我必须说，我从json获取的每个产品都有一个cat_id集。

---

感谢您的帮助

据我所知，如果通过的道具是正确的，您的组件将按预期工作。但是，如果该组件不需要状态（无状态），您可以将该组件重构为功能组件，如下所示：

const ProductListFilter = ({ addToCart, removeFromCart, products, cart, catid }) => {
  let filteredProds = products.filter(item => item.cat_id === catid)
  return (
    <div className="products-list row mb-3">
      {filteredProds.map((product, index) => (
        <ProductListItem
          key={index}
          product={product}
          addToCart={addToCart}
          removeFromCart={removeFromCart}
          //cart={cart}
          cartItem={cart.filter(cartItem => cartItem.id === product.id)[0]}
        />
      ))}
    </div>
  )
}

const ProductListFilter=（{addToCart，removeFromCart，products，cart，catid}）=>{
让filteredProds=products.filter（item=>item.cat_id===catid）
返回(
{filteredProds.map（（产品，索引）=>(
cartItem.id==product.id）[0]}
/>
))}
)
}

与您的问题无关，但为什么您要将所有道具都置于组件状态？对不起，我是一个绝对的初学者，但实际上它是有用的，可以提供一个您正在传递的数据示例？“ProductListItem”的代码？Ali，如果我将filteredProds函数中的this.state.cat替换为一个数字，比如说11，它工作并显示属于类别11的所有产品，因此这可能意味着您传递的道具不正确

const ProductListFilter = ({ addToCart, removeFromCart, products, cart, catid }) => {
  let filteredProds = products.filter(item => item.cat_id === catid)
  return (
    <div className="products-list row mb-3">
      {filteredProds.map((product, index) => (
        <ProductListItem
          key={index}
          product={product}
          addToCart={addToCart}
          removeFromCart={removeFromCart}
          //cart={cart}
          cartItem={cart.filter(cartItem => cartItem.id === product.id)[0]}
        />
      ))}
    </div>
  )
}