我用MERN栈(Mongo,Express,React,Node)写了一个简单的“杂货清单”Web应用程序。我遇到的问题是,除非我重新加载页面,否则我的DELETE REST命令不会触发。下面是我的事件处理程序和后端的源代码。
事件处理程序
handleRemove(e) {
fetch('http://localhost:3001/list/' + e._id, {
headers: {
"Access-Control-Allow-Credentials": true,
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json"
},
method: "DELETE",
body: e
})
this.refs.list.forceUpdate();
}
快速后端
router.delete('/list' +'/:id',function(req,res) {
item.remove({
_id: req.params.id
}, function(err) {
if(err) {
res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "PATCH, POST, GET, PUT, DELETE, OPTIONS");
res.header("Access-Control-Allow-Methods", "POST, GET, DELETE");
res.header("Access-Control-Allow-Credentials", "true");
return res.send(err);
} else {
console.log("successfully deleted")
}
})
})
点击
<button onClick={() =>
this.props.handleRemove(item)}
className="item" key={item._id + "btn"}>Remove</button>
2条答案
按热度按时间uubf1zoe1#
确保正确调用
handleRemove
onClick。如果它在页面加载时启动,那么我怀疑您正在执行以下操作:
您应在何时执行此操作:
cidc1ykv2#
DELETE
命令正在启动。这不会更新UI。您必须更新
state
。在
handleRemove
中: