我有以下組件import Link from "next/link";import styles from "./product.module.css";export default function Product(props) {  return (    <div className={styles.product}>      <Link href={props.link}>        <img src={props.img} alt={props.name} />      </Link>      <Link href={props.link}>        <h3>{props.name}</h3>      </Link>      <span>{props.price}</span>              <button onClick={handleClick}>          Add to Bag         </button>    </div>  );  }我正在嘗試添加一個名為 handleClick 的 onClick 并進(jìn)行測試，我正在嘗試運行包含以下內(nèi)容的控制臺日志{props.name} has been added to the basket at a price of {props.price}但是，onClick 我收到以下錯誤：TypeError: undefined is not an object (evaluating '_this.props')解決這個問題的過程是什么？handleClick 函數(shù)的代碼如下。const handleClick = (e) => {        console.log(`${this.props.name} + "added to basket at price of " + ${this.props.price} + "`);}