onClick 函数在使用 context-api 时不起作用

Question

用于单击产品并拉出产品详细信息页面的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,
};

Answer 1

bind它：

        value={{
          ...this.state,
          handleDetails: this.handleDetails.bind(this)
        }}

否则，当您调用 value.handleDetails 时，该函数将绑定到与您想要的上下文（组件的上下文）不同的上下文 (value)