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

编程问答 2022-04-21

问题描述

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

expressexpressexpressmernmongodbmongodbreactjsreactjsreactjsreactjs