為什么我收到錯誤：無效的掛鈎調用？

Question

我收到了一個無法讀取未定義的道具。 我正在嘗試解構道具，但我需要鈎子調用。 有沒有辦法讓我在函數中解構 props 或以其他方式解決這個問題？

ProductBrowse.jsx 正在格式化產品：

    const ProductBrowse = () => {

    const { id, name, img, store, price, desc, inCart } = this.props.product;
    const [open, setOpen] = React.useState(false);

    const openModal = () => {
      setOpen(!open);
    };

    const closeModal = () => {
      setOpen(!open);
    };

    return (
      <Box border={1} borderRadius={3}>
        <Card>
          <CardActionArea>
             <ProductModal
              open={open}
              onClick={() => openModal()}
              onClose={() => closeModal()}
              onSave={() => closeModal()}
              productName={name}
              productDesc={desc}
            />
            <CardHeader
              title={name}
              subheader={formatCurrency(price)}
            />
            <CardMedia
              image={img}
              alt={desc}
            />
            <CardContent>
              <Typography variant='body2' color='textSecondary' component='p'>
                {desc}
              </Typography>
            </CardContent>
          </CardActionArea>
          <CardActions>
            <Button size='small' /*To Checkout*/>BUY NOW</Button>
            <Button
              size='small'
              onClick={() => {
                console.log('Added to Cart');
              }}
            >
              ADD TO CART
            </Button>
            <Button size='small'>REVIEW</Button>
          </CardActions>
        </Card>
      </Box>
    );
  }

Answer 1

您可以將基於類的組件轉換為功能組件，如下所示：

const ProductBrowse = ({ product }) => {

   const { id, name, img, store, price, desc, inCart } = product;
   ...
}
export default ProductBrowse;

如您所見，產品道具正在被解構。 如果您要提供更多道具並希望使用它們，則可以使用整個道具對象。

IE

const ProductBrowse = (props) => {

   const { id, name, img, store, price, desc, inCart } = props.product;
   ...
}
export default ProductBrowse;

Answer 2

您正在嘗試在基於類的組件中使用鈎子。 請參考轉換后的功能組件

const ProductBrowse = props => {
  const { id, name, img, store, price, desc, inCart } = props.product;
  const [open, setOpen] = useState(false);

  const classes = useStyles();

  const openModal = () => {
    setOpen(!open);
  };

  const closeModal = () => {
    setOpen(!open);
  };

  return (
    <Box border={1} borderRadius={3}>
      <Card>
        <CardActionArea>
          {<ProductModal
            open={open}
            onClick={() => openModal()}
            onClose={() => closeModal()}
            onSave={() => closeModal()}
            productName={name}
            productDesc={desc}
          /> }
          <CardHeader title={name} subheader={formatCurrency(price)} />
          <CardMedia image={img} alt={desc} /> 
          <CardContent>
            <Typography variant="body2" color="textSecondary" component="p">
              {desc}
            </Typography>
          </CardContent>
        </CardActionArea>
        <CardActions>
          <Button size="small" /*To Checkout*/>BUY NOW</Button>
          <Button
            size="small"
            onClick={() => {
              console.log("Added to Cart");
            }}
          >
            ADD TO CART
          </Button>
          <Button size="small">REVIEW</Button>
        </CardActions>
      </Card>
    </Box>
  );
};

此外，在使用此組件時，當您在 ProductBrowse 組件中解構時，將產品作為道具傳遞。 應該是這樣的：

<ProductBrowse products={this.products} />