更新应用数据时无法从后端获取数据，请求排查问题

核心问题及修复点： #

1. 请求方法不匹配
   前端用GET请求/edit/${id}，但后端只定义了PATCH方法的/edit/:id接口——这会直接导致请求返回404，自然拿不到数据。后端需要新增对应的GET接口来获取单条数据。

2. 后端错误处理存在bug
   原PATCH接口的catch块里，error变量未声明，直接使用会抛出未定义错误，必须改成catch(error) { ... }才能正确捕获异常。

3. 其他潜在问题

• 确认前端的id变量是否有效（比如是否从路由参数/状态中拿到了正确的ID值）
• 检查process.env.REACT_APP_BASE_URL配置是否正确，拼接后的请求URL是否符合后端地址
• 验证数据库中是否存在对应ID的文档，findByIdAndUpdate找不到文档时会返回null
• 查看浏览器控制台是否有跨域（CORS）相关报错

修复后的代码示例： #

后端代码（新增GET接口+修复PATCH错误处理）

// 新增GET接口：用于获取单条数据
router.get("/edit/:id", async (req, res) => {
  try {
    const { id } = req.params;
    const user = await Crud.findById(id);
    if (!user) {
      return res.status(404).json({ message: "目标数据不存在" });
    }
    res.status(200).json(user);
  } catch(error) {
    res.status(500).json({ message: "获取数据失败", error: error.message });
  }
});

// 修复原PATCH接口的错误处理
router.patch("/edit/:id", async (req, res) => {
  try {
    const { id } = req.params;

    const updateUser = await Crud.findByIdAndUpdate(id, req.body, {
      new: true,
      runValidators: true, // 可选：开启Schema验证，确保更新数据符合规则
    });

    if (!updateUser) {
      return res.status(404).json({ message: "目标数据不存在" });
    }

    console.log(updateUser);
    res.status(200).json(updateUser); // 更新成功用200状态码更合适，201多用于创建资源
  } catch(error) {
    res.status(422).json({ message: "更新失败", error: error.message });
  }
});

前端代码（优化错误处理+依赖管理）

const getData = async () => {
    try {
      const res = await fetch(`${process.env.REACT_APP_BASE_URL}/edit/${id}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });

      if (!res.ok) {
        throw new Error(`请求失败：${res.status}`);
      }

      const data = await res.json();
      console.log(data);
      setValues(data);
      console.log("数据获取成功");
    } catch (err) {
      console.error("获取数据出错:", err.message);
    }
  };

useEffect(() => {
  if (id) { // 确保id存在再发起请求，避免无效调用
    getData();
  }
}, [id]); // 添加id为依赖，id变化时自动重新获取数据

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