Javascript Fetch POST请求在不触发函数的情况下随机运行

我正在使用reactjs、express和postgresql应用程序，其中有3个图标，如果其中一个单击，它将根据单击的图标向数据库发送值，是的，如果单击图标，它工作正常，值成功发送到数据库，但在接下来的3-5分钟内，我检查了我的数据库，根据我上次的点击，还有2-3个不需要的附加值，并在控制台上抛出错误。如下图所示，下面07.43处的值是通过触发该函数而增加的值，07.45处的值是在不触发该函数的情况下随机增加的值

这是我的图标代码

<img
    src={goodIcon}
    alt='Bad'
    onClick={onClickGood}
    className='rating__container__icon'
/>

这是我的后端代码，用于处理上面的post请求

router.post('/good-rating', (req, res) => {
    try {
        const { good } = req.body;
        pool.query(
            'INSERT INTO ratings (good_rating) VALUES ($1) RETURNING *',
            [good]
        );
    } catch (error) {
        console.error(err.message);
        res.status(500).send('Oops, Something Went Wrong!');
    }
});

---

我所做的是将onclick-fetch方法从try-catch更改为promise，用标记形式包装图标并更改为按钮类型。

后端需要在成功或失败时返回响应

router.post('/good-rating', (req, res) => {
try {
    const { good } = req.body;
    pool.query(
        'INSERT INTO ratings (good_rating) VALUES ($1) RETURNING *',
        [good]
    );
    res.send({
     success:true,
     msg:"data saved"
    })
} catch (error) {
   res.send({
   success:false,
   msg:error.message
   });
}
});

在前端，你需要根据这个反应采取行动

const onClickGood = async (e) => {
    e.preventDefault();
   
        const body = { good };
        const response = await fetch('http://localhost:5555/good-rating', {
            method: 'POST',
            headers: { 'content-type': 'application/json' },
            body: JSON.stringify(body),
        }).then((res)=>res.json()).catch((err)=>console.log(err))
       if(response.success){
       //code here
       console.log(response)
      }else{
       console.log('Error')
       console.log(response)     
    }};

---

您还可以在后端添加请求验证

const onClickGood = async (e) => {
    e.preventDefault();
   
        const body = { good };
        const response = await fetch('http://localhost:5555/good-rating', {
            method: 'POST',
            headers: { 'content-type': 'application/json' },
            body: JSON.stringify(body),
        }).then((res)=>res.json()).catch((err)=>console.log(err))
       if(response.success){
       //code here
       console.log(response)
      }else{
       console.log('Error')
       console.log(response)     
    }};