React+Node.js无数据库待办清单：如何在Node.js端删除对象数组元素

步骤1：后端添加DELETE接口 #

在你的Node.js index.js中添加处理删除请求的接口，遵循REST规范使用DELETE方法：

// 处理待办项删除请求
app.delete('/Todo/:id', (req, res) => {
  // 从URL参数中获取待办项ID
  const todoId = req.params.id;
  
  // 过滤掉目标ID的待办项，注意将后端存储的Date对象转为ISO字符串和前端传入的ID对比
  const updatedLists = lists.filter(item => item.id.toISOString() !== todoId);
  
  // 由于lists是const声明的数组，先清空原数组再推入过滤后的新元素
  lists.length = 0;
  lists.push(...updatedLists);
  
  res.status(200).json({ 
    message: '待办项删除成功', 
    updatedTasks: updatedLists 
  });
});

优化建议：当前用new Date()作为ID会导致前后端类型不一致（后端是Date对象，前端是字符串），更推荐用时间戳作为ID，处理更简单。修改POST接口：

app.post('/Todo', function(req, res){
  const newTodo = {
    "id": Date.now(), // 用时间戳（数字类型）作为ID
    "toDo": req.body.list,
    "status": false
  };
  lists.push(newTodo);
  console.log(lists);
  res.status(200).json(newTodo);
});

对应的DELETE接口可简化为：

app.delete('/Todo/:id', (req, res) => {
  const todoId = parseInt(req.params.id); // 将URL参数转为数字
  const updatedLists = lists.filter(item => item.id !== todoId);
  
  lists.length = 0;
  lists.push(...updatedLists);
  
  res.status(200).json({ 
    message: '待办项删除成功', 
    updatedTasks: updatedLists 
  });
});

步骤2：修改前端Remove函数调用后端接口 #

你的前端目前仅更新本地状态，需改为调用后端接口同步数据，修改todo.js中的Remove函数为异步函数：

async function Remove(id) {
  try {
    // 发送DELETE请求到后端
    await fetch(`/Todo/${id}`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    
    // 请求最新的待办列表并更新本地状态
    const response = await fetch('/Todo');
    const updatedTasks = await response.json();
    setTasks(updatedTasks);
  } catch (error) {
    console.error('删除失败:', error);
  }
}

关键说明 #

• 必须保证前后端ID类型一致，否则会出现匹配失败问题（Date对象需转字符串对比，时间戳直接对比数字即可）
• 后端更新数组时，因lists是const声明，无法直接重新赋值，故用lists.length = 0清空后再推入新元素
• 前端用异步函数+await处理接口请求，确保数据同步后再更新本地状态

内容的提问来源于stack exchange，提问作者Developer