在MERN应用程序中执行删除操作后，React前端未更新

Question

我有一个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操作中；读取"；(get(功能正常工作，可以从后端开始填充我的笔记列表(在应用程序组件加载时使用useEffect(((。

Answer 1

在组件装载之前，您的状态notes将为null。请检查您状态下的notes不是null，它是array。会很好

prevState.notes && prevState.notes.filter(note => note._id !== id)

Answer 2

这很有效。。。

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));
};