Next.js中React函数式组件循环按钮onClick获取ID遇this未定义问题

问题分析 #

1. this is undefined报错原因：函数式组件中不存在this上下文，你用this.deleteReview调用函数自然会报错，直接引用定义好的deleteReview函数即可。
2. 无法获取ID的问题：当前按钮没有设置value属性，即便修复this的问题，alert(currentTarget.value)也拿不到对应的review ID，需要给按钮绑定ID值或者直接在回调中传入参数。

修改方案1：通过currentTarget获取ID（给按钮添加value属性） #

const deleteReview = async ({ currentTarget }) => {
  alert(currentTarget.value);
};

{
  reviewfromserver.map(reviewnew => {
    return (
      <div key={reviewnew.id}>
        <div>
          {reviewnew.id}- {reviewnew.title} 
          <button onClick={deleteReview} value={reviewnew.id}>Delete</button>
        </div>
      </div>
    );
  })
}

修改方案2：直接传递ID参数（更直观的写法） #

const deleteReview = async (reviewId) => {
  alert(reviewId);
};

{
  reviewfromserver.map(reviewnew => {
    return (
      <div key={reviewnew.id}>
        <div>
          {reviewnew.id}- {reviewnew.title} 
          <button onClick={() => deleteReview(reviewnew.id)}>Delete</button>
        </div>
      </div>
    );
  })
}

内容的提问来源于stack exchange，提问作者user20934362