编辑指定学生数据无法加载，React+Koa+MongoDB代码排查请求

这段React代码存在几个关键问题，直接导致数据无法正常加载：

• 模板字符串语法错误：你用双引号包裹请求URL，里面的${id}不会被解析为变量值，会被当作字符串字面量发送请求，实际请求地址变成了http://localhost:5000/student/${id}，后端自然找不到对应数据。必须把双引号换成反引号来启用模板字符串功能。

• useEffect依赖缺失：当前useEffect的依赖数组是空的，如果id是动态获取的（比如从路由参数、props传入），组件渲染时id可能还没初始化，或者后续id变化时，useEffect不会重新执行请求，导致拿不到正确的数据。需要把id加入依赖数组。

• 缺少错误处理逻辑：axios请求没有添加catch块，一旦后端报错、网络故障或者返回格式异常，前端会直接抛出未捕获的错误，也无法提示用户问题出在哪里。

• 未处理数据为空的情况：如果后端返回的res.data.existingData是null或undefined，直接访问.name、.age、.city会触发类型错误，应该先判断数据是否存在再赋值。

修复后的代码示例： #

useEffect(() => {
  // 先判断id是否存在，避免无效请求
  if (!id) return;

  axios.get(`http://localhost:5000/student/${id}`)
    .then((res) => {
      const data = res.data.existingData;
      if (data) {
        setStudent(data);
        setName(data.name);
        setAge(data.age);
        setCity(data.city);
      } else {
        // 处理数据不存在的情况，比如提示用户
        console.log("该学生数据不存在");
      }
    })
    .catch((err) => {
      // 捕获请求错误，打印日志或提示用户
      console.error("加载学生数据失败：", err);
    });
}, [id]); // 加入id作为依赖

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