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'
/>

这是我将 post 提取到数据库的 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);
        }
    };

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

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

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

Answer 1

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

router.post('/good-rating', (req, res) => {
try {
    const { good } = req.body;
    pool.query(
        'INSERT INTO ratings (good_rating) VALUES () 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)     
    }};

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

Fetch POST request runs randomly without triggering the function

javascript

node.js

express

reactjs

fetch-api