Fetch POST 请求随机运行而不触发函数

Question

我正在使用 reactjs、express 和 postgresql 应用程序，其中有 3 个图标，如果单击其中一个图标，它将根据单击的图标将值发送到数据库，是的，如果单击该图标，它会起作用，值已成功发送到数据库，但是在接下来的 3-5 分钟内，我检查了我的数据库，根据我最后一次单击添加了 2-3 个不需要的值，并在控制台上引发错误。如下图，下面07.43的值是触发函数的增值，07.45是不触发函数的随机增值

这是我的图标代码

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

这是我的 onClick 方法来获取帖子到数据库

const onClickGood = async (e) => {
        e.preventDefault();
        try {
            const body = { good };
            const response = await fetch('http://localhost:5555/good-rating', {
                method: 'POST',
                headers: { 'content-type': 'application/json' },
                body: JSON.stringify(body),
            });
            console.log(response);
        } catch (error) {
            console.error(error.message);
        }
    };

这是我用于后端处理上述发布请求的代码

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，用标签形式包装图标并更改为按钮类型。

Answer 1

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

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)     
    }};