开发者问题收集

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

2021-07-07
534

我有一个 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())。

2个回答

在组件挂载之前,您的状态 notes 将为 null 。请检查您的状态中的 notes 是否不为 null ,并且它是一个 array 就可以了

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

Khue Pham
2021-07-07

这有效...

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));
  };
Xenilo
2021-07-07