前端无法获取MongoDB中传感器数据：技术求助

1. 修正API请求路径不匹配问题 #

你的服务器将温度路由挂载到了/temp前缀下，但前端请求的是/temperatures，路径不匹配导致无法获取数据。同时useEffect未设置依赖数组，会引发无限循环请求。

前端代码修改：

import React, { useEffect, useState } from 'react';

function DevExpressCharts() {
    const [temperatures, setTemperatures] = useState([{
        temperature: '',
        createdAt: ''
    }])

    useEffect(() => {
        // 修正请求路径，添加/temp前缀；开发阶段需指定完整服务器地址
        fetch('http://localhost:8080/temp/temperatures')
            .then(res => {
                if(!res.ok) throw new Error(`HTTP错误: ${res.status}`)
                return res.json()
            })
            .then(jsonRes => setTemperatures(jsonRes))
            .catch(err => console.error('获取数据失败:', err))
    }, []) // 空依赖数组确保仅在组件挂载时请求一次

    return (
        <div>
            <h1>温度数据</h1>
            {temperatures.map((temp, index) => (
                <div key={index}>
                    <p>数值: {temp.temperature}</p>
                    <p>采集时间: {new Date(temp.createdAt).toLocaleString()}</p>
                </div>
            ))}
        </div>
    )
}

export default DevExpressCharts;

2. 修正前端state字段与数据库模型不匹配 #

你的温度模型启用了timestamps: true，Mongoose会自动生成createdAt和updatedAt字段，而非自定义的date，需调整前端state对应字段。

3. 完善服务器数据库保存的错误处理 #

WebSocket接收数据后保存到数据库时未做错误捕获，可能导致数据未成功写入却无提示，需添加异常处理：

服务器WebSocket部分修改：

ws.on('message', async function incoming(message) {
    console.log('收到传感器数据:', message);
    ws.broadcast(message);

    const tempData = message.slice(0, 5);
    const humidData = message.slice(6, 11);
    const pressureData = message.slice(12, 21);

    try {
        // 使用await确保数据保存完成，避免异步丢失错误
        await new Temperature({ temperature: tempData }).save();
        await new Humidity({ humidity: humidData }).save();
        await new Pressure({ pressure: pressureData }).save();
        console.log('传感器数据已成功写入数据库');
    } catch (err) {
        console.error('写入数据库失败:', err);
    }
});

可选：通过WebSocket实现前端实时更新 #

如果需要前端实时展示新的传感器数据，无需依赖定时请求，可在前端同时监听WebSocket：

前端新增WebSocket监听逻辑：

useEffect(() => {
    // 获取历史数据
    fetch('http://localhost:8080/temp/temperatures')
        .then(res => res.json())
        .then(jsonRes => setTemperatures(jsonRes))
        .catch(err => console.error('获取历史数据失败:', err));

    // 建立WebSocket连接，实时接收新数据
    const ws = new WebSocket('ws://localhost:8080/sendData');
    ws.onmessage = (event) => {
        const newTemp = event.data.slice(0, 5);
        // 将新数据追加到现有列表
        setTemperatures(prev => [...prev, {
            temperature: newTemp,
            createdAt: new Date().toISOString()
        }]);
    };

    // 组件卸载时关闭WebSocket连接
    return () => ws.close();
}, []);

额外检查点 #

• 确认服务器运行端口与前端请求端口一致（如服务器用8080，前端请求需对应）
• 检查服务器控制台是否输出MongoDB database connection esablished successfully，确认数据库连接正常
• 验证传感器数据格式是否符合slice截取范围，避免保存无效数据

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