React中如何获取WebSocket onmessage返回数据并在render方法中使用

你需要把websocket接收到的数据存入React组件的state中，只有state变化会触发组件重新渲染，同时你可以在render函数中访问state里的存储值。

具体修改点 #

• 首先为Class组件初始化state，设置接收数据的初始值
• 修正原代码的笔误：client.open 应为 client.onopen，否则连接成功回调不会触发
• 在onmessage回调中解析完数据后，调用this.setState将数据存入组件state
• render函数中从this.state取值展示，注意不能直接渲染JS对象，需要取具体字段或者序列化处理

修改后的完整代码 #

import './App.css';
import { w3cwebsocket as W3CWebSocket } from "websocket";
import { Component } from 'react';

const client = new W3CWebSocket('ws://xyz:9080/user');

class App extends Component {
    // 初始化state，存储websocket推送的数据
    state = {
        wsData: null
    }

    componentDidMount() {
        // 修正笔误：open改为onopen
        client.onopen = () => {
            console.log("Connected");
        };

        client.onmessage = (e) => {
            const object = JSON.parse(e.data);
            console.log(object.Snapshot);
            // 将数据存入state，触发组件重新渲染
            this.setState({
                wsData: object
            })
        }
        client.onclose = () => {
            console.log("Closed...");
        }
    }

    render() {
        const { wsData } = this.state;
        return (<div className="App">
                    {/* 先判断数据是否存在避免报错，这里示例展示Snapshot字段，可按需修改 */}
                    <h2>{ wsData ? wsData.Snapshot : '等待数据推送...' }</h2>
                    {/* 如果需要查看完整对象内容，可转成JSON字符串展示 */}
                    <pre>{ wsData ? JSON.stringify(wsData, null, 2) : '' }</pre>
                </div>
        );
    }
}

export default App;

补充说明 #

如果你的Snapshot是复杂对象类型，同样不能直接渲染，需要拆分取具体的基础类型字段（字符串、数字、布尔值等）展示。

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