Node.js向React.js传递用户设备列表数据失败求助

尝试从Node.js后端获取当前用户绑定的设备列表，在React.js前端表格展示，但无法获取数据，附上前后端代码求解决思路和修正方案。

app.get("/getdevice", (req, res) => {
    let email = req.query.email;

    let stmt = `SELECT * FROM users WHERE email=?`;
    let todo = [email];

    
    db.query(stmt, todo, (err, results, fields) => {
      if (err) {
        console.error(err.message);
        return res.status(500).json({error: err.message});
      }

      if (results.length > 0) {
        const userid = results[0].id;
        
        let statement = `SELECT * FROM controlModules WHERE deviceowner=?`;
        let task = [userid];
        
        // 获取设备列表
        db.query(statement, task, (err, results, fields) => {
          if (err) {
            console.error(err.message);
            return res.status(500).json({error: err.message});
          }
          const array = results.map(item => item.devicename);
          res.json({array});
        });
      } else {
        res.status(404).json({error: "未找到该用户"});
      }
    });
  });

const Module = () => {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const email = sessionStorage.getItem("email");
    const [device, setDevice] = useState([]);

    Axios.defaults.withCredentials = true;

    useEffect(() => {
        if (!email) {
            console.log("未获取到用户邮箱");
            return;
        }
        Axios.get("http://localhost:3020/getdevice", {
            params: { email }
          })
          .then(response => {
            setDevice(response.data.array);
          })
          .catch(error => {
            console.error("设备列表请求失败:", error);
          })
    },[email]);

    return (
        <div className="MainBodyM">
            <SDH/>
            <h3 className="deviceStatus"></h3>
            <div className="tempHeader">
                {device.map((devName, index) => (
                    <div key={index} className="device-item">{devName}</div>
                ))}
            </div>
            
            <Link to="/registerdevice">
                <Button>Add Control Module</Button>
            </Link>
        </div>
    );
};

export default Module;

后端核心问题修复 #

1. 补全错误响应逻辑：原代码查询用户表出错时仅打印日志，未返回响应导致前端请求挂起，现在在错误分支返回500状态码和错误信息；同时新增用户不存在的分支，返回404状态码提示。
2. 简化设备列表生成：用map替代for循环，更简洁地提取设备名称数组。
3. 统一错误返回格式：所有错误场景都返回JSON格式数据，方便前端统一处理。

前端核心问题修复 #

1. 正确提取响应数据：后端返回结构为{array: [...]}，原代码直接存整个response对象，现在改为取response.data.array存入state。
2. 增加邮箱校验：如果sessionStorage中没有用户邮箱，直接终止请求并打印提示，避免无效请求。
3. 完善useEffect依赖：将email加入依赖数组，确保邮箱变化时重新发起请求。
4. 正确渲染数组：用map遍历设备列表生成DOM元素，避免直接渲染数组导致的字符串化展示问题。

调试建议 #

• 后端：在req.query.email、userid、results等关键节点打印日志，确认数据查询流程是否正常。
• 前端：打开浏览器开发者工具的Network标签，查看请求的状态码、参数、响应内容，确认请求是否发送成功、后端返回格式是否符合预期。

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