使用context-api的onClick函数不起作用

问题描述

用于点击产品并拉出产品详细信息页面的handleDetail()功能不起作用。我的addToCart函数正常运行，所以我不知道自己缺少什么。

context.js：

state = {
  products: [],productDataDetail: productDataDetail,};

getItem = (id) => {
  const product = this.state.products.find((item) => item.id === id);
  return product;
};

handleDetails = id => {
  const product = this.getItem(id);
  this.setState(() => {
    return { productDataDetail: product };
  });
};

render() {
  return (
    <ProductContext.Provider
      value={{
        ...this.state,handleDetails: this.handleDetails,}}
    >
      {this.props.children}
    </ProductContext.Provider>
  );
}

product.js：

<ProductConsumer>
  {(value) => (
    <Card className={classes.root}>
      <CardActionArea onClick={() => value.handleDetails(id)}>
  )}
</ProductConsumer>

产品数据：

export const productDataDetail = {
  id: 0,name: "Desk",img: desk,store: "Local Furniture Shop 1",price: 9.99,desc:
    "This sturdy desk is built to outlast years of coffee and hard work. You get a generous work surface and a clever solution to keep cords in place underneath.",inCart: false,count: 0,total: 0,};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）