React待办应用DELETE接口返回404（参数为undefined）问题求助

问题修复方案 #

问题核心是删除接口的待办ID为undefined，是因为没有将MongoDB生成的真实待办ID正确传递到删除组件，按以下步骤修改即可：

1. 修正GetToDoList组件的遍历逻辑
   你之前把数组索引错误当成了待办项ID，且没有把真实ID传递给子组件，修改如下：

// GetToDoList组件的tbody部分修改为
<tbody>
  {todos && todos.length > 0
    ? todos.map((todo) => <TodoList data={todo} key={todo._id} />)
    : null}
</tbody>

2. 修正TodoList组件的传参逻辑
   你之前没有取出待办项ID，也没有传递给删除组件，修改如下：

const TodoList = ({ data }) => {
  const { Date, Todo, Due, _id } = data; // 新增取出待办ID

  return (
    <tr>
      <td>{moment(Date).format("L")}</td>
      <td className="todotext">{Todo}</td>
      <td>{moment(Due).format("L")}</td>
      <td className="tdactions">
        <DeleteToDo _id={_id} /> {/* 把ID传递给删除组件 */}
      </td>
    </tr>
  );
};

3. 修正DeleteToDo组件的无效代码和请求路径
   组件内定义的todos状态从未赋值，相关过滤逻辑无效可直接删除，同时调整请求路径为绝对路径避免拼接错误：

// 删除无用代码：const [todos, setTodos] = useState([]);
const remove = (e, _id) => {
  e.preventDefault();

  axios
    .delete(`/todos/delete/${_id}`) // 调整为和get请求前缀一致的绝对路径
    .then((response) => {
      // 原filter和setTodos逻辑可删除，后续已经做了页面刷新
      console.log("response", response);
      Swal.fire({
        icon: "success",
        confirmButtonColor: "#000000",
        timer: 3000,
        width: 400,
        title: "SUCCESS!",
        text: response.data.message,
      }).then(function () {
        window.location.reload();
      });
    })
    // catch逻辑保持不变即可
};

4. 确认后端路由匹配
   确保后端删除接口的路由定义和参数名和请求对应：

// 示例，保证参数名是id，和控制器里的req.params.id对应
app.delete('/todos/delete/:id', exports.removeOneController)

内容的提问来源于stack exchange，提问作者Chanelle Bösiger