如何解决在 MERN 应用程序中进行删除操作后,React 前端未更新
我有一个 MERN 应用程序,当我点击删除按钮时,我试图删除一个笔记(由标题和内容组成)。当我单击该按钮时,后端 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 操作中,似乎只有“读取”(获取)功能可以正常工作以最初从后端填充我的笔记列表(在应用组件加载时使用 useEffect())。
解决方法
这有效...
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));
};
,
在组件挂载之前,您的状态 notes
将是 null
。请检查您所在州的 notes
不是 null
并且它是 array
会没事的
prevState.notes && prevState.notes.filter(note => note._id !== id)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。