在MERN应用程序中执行删除操作后，React前端未更新
在MERN应用程序中执行删除操作后，React前端未更新
提问于 2021-07-07 23:57:42
我有一个MERN应用程序，当单击delete按钮时，我试图删除一个注释(由标题和内容组成)。当我单击该按钮时，后端mongoDB数据库将更新-该项目实际上已被删除-但随后控制台显示一个错误。
下面是通过相关文件跟踪的删除操作：
// App.jsx
const deleteNote = id => {
NoteDataService.deleteNote(id)
.then(response => {
console.log(`note ${id} deleted`);
setNotes(prevState => {
return prevState.notes.filter(note => note._id !== id);
});
})
.catch(e => console.log(e));
};
// note.js
import http from '../http-common.js';
class NoteDataService {
createNote = data => http.post('/', data);
getAll = () => http.get('/');
deleteNote = id => http.delete(`?id=${id}`);
}
export default new NoteDataService();
// http-common.js
import http from '../http-common.js';
class NoteDataService {
createNote = data => http.post('/', data);
getAll = () => http.get('/');
deleteNote = id => http.delete(`?id=${id}`);
}
export default new NoteDataService();下面是错误：
App.jsx:41 Uncaught TypeError: Cannot read property 'filter' of undefined
at App.jsx:41在我尝试实现的CRUD操作中，似乎只有"Read“(get)功能能够正常工作，以便最初从后端填充我的注释列表(在加载应用程序组件时使用useEffect() )。
回答 2
Stack Overflow用户
发布于 2021-07-08 00:03:17
这行得通..。
const deleteNote = id => {
NoteDataService.deleteNote(id)
.then(response => {
console.log(`note ${id} deleted`);
console.log(notes);
setNotes(notes.filter(note => note._id !== id));
})
.catch(e => console.log(e));
};Stack Overflow用户
发布于 2021-07-08 00:05:32
在挂载组件之前，您的状态notes将为null。一定要检查一下你所在州的notes不是null，它是一个array就可以了
prevState.notes && prevState.notes.filter(note => note._id !== id)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68289328
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号