在 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 操作中，似乎只有“读取”（获取）功能可以正常工作以最初从后端填充我的笔记列表（在 App 组件加载时使用 useEffect()）。

Answer 1

这工作...

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

Answer 2

在组件安装之前，您的状态notes将为null 。 请检查您所在州的notes不为null ，它是一个array就可以了

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