Fetch POST请求随机运行，不触发函数
Fetch POST请求随机运行，不触发函数
提问于 2021-04-02 09:04:24
我正在与reactjs，快递和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 ($1) RETURNING *',
[good]
);
} catch (error) {
console.error(err.message);
res.status(500).send('Oops, Something Went Wrong!');
}
});我所做的是将onclick fetch方法从try-catch更改为promise，用标签形式包装图标并更改为按钮类型。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-02 09:16:44
在后台成功或失败时需要发回响应
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)
}};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66913288
复制相关文章
相似问题
腾讯云开发者
