如何通过ReactJS获取Python发送的JSON数据并对应展示

1. 统一数据键与前端模块的匹配规则 #

先让Python发送的JSON键和前端模块的标识一一对应，避免匹配混乱。比如Python发送的JSON结构如下：

# Python WebSocket 发送代码示例
import websockets
import asyncio
import json

async def send_sensor_data():
    async with websockets.connect("ws://localhost:3000/ws") as websocket:
        # 键名要和前端模块的标识对应
        sensor_data = {
            "temperature": 26.5,
            "humidity": 58,
            "pressure": 1012.3
        }
        await websocket.send(json.dumps(sensor_data))
        await asyncio.sleep(3)

asyncio.get_event_loop().run_until_complete(send_sensor_data())

2. 前端App.js的WebSocket接收与数据渲染 #

方法一：通过模块ID直接匹配JSON键 #

如果前端模块用ID和JSON键一一对应，代码逻辑最简单：

// App.js 完整示例
import { useEffect, useRef } from 'react';

function App() {
  const wsRef = useRef(null);

  useEffect(() => {
    // 建立WebSocket连接，替换为你的Python服务地址
    wsRef.current = new WebSocket('ws://localhost:8765');

    wsRef.current.onmessage = (event) => {
      const receivedData = JSON.parse(event.data);
      // 遍历所有键值对，匹配对应模块
      Object.entries(receivedData).forEach(([key, value]) => {
        const targetModule = document.getElementById(key);
        if (targetModule) {
          const valueDisplay = targetModule.querySelector('.data-value');
          if (valueDisplay) {
            valueDisplay.textContent = value;
          }
        }
      });
    };

    // 组件卸载时关闭连接
    return () => {
      wsRef.current?.close();
    };
  }, []);

  return (
    <div className="dashboard">
      <div className="module" id="temperature">
        <h2>Temperature</h2>
        <div className="data-value">--</div>
      </div>
      <div className="module" id="humidity">
        <h2>Humidity</h2>
        <div className="data-value">--</div>
      </div>
      <div className="module" id="pressure">
        <h2>Pressure</h2>
        <div className="data-value">--</div>
      </div>
    </div>
  );
}

export default App;

方法二：通过H2文本匹配JSON键 #

如果不想依赖ID，想用H2的文本内容匹配，需要把文本转成和JSON键一致的格式（比如小写、去除空格）：

// 修改onmessage中的处理逻辑
wsRef.current.onmessage = (event) => {
  const receivedData = JSON.parse(event.data);
  const allModules = document.querySelectorAll('.module');
  
  allModules.forEach(module => {
    // 获取H2文本并标准化
    const h2Content = module.querySelector('h2').textContent.trim().toLowerCase();
    // 匹配JSON键并更新值
    if (receivedData[h2Content] !== undefined) {
      const valueDisplay = module.querySelector('.data-value');
      valueDisplay.textContent = receivedData[h2Content];
    }
  });
};

3. 常见问题排查 #

• 确认WebSocket连接地址正确，Python服务和前端服务的端口/域名一致；开发环境可在React的package.json中添加"proxy": "http://localhost:8765"解决跨域。
• 检查JSON序列化/反序列化是否正确：Python用json.dumps()，前端用JSON.parse()。
• 核对模块选择器（ID、class）是否拼写正确，避免找不到元素。

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