Javascript onClick函数使用上下文api不起作用

用于单击产品并打开产品详细信息页面的

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>
  );
}

bind

it:

值={{
…这个州，
handleDetails:this.handleDetails.bind（this）
}}

否则，当您调用

value.handleDetails

时，函数将绑定到不同于预期上下文（组件上下文）的上下文（

value

）

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