如何在使用websockets接收消息时更改componentDidMount()中的状态？

componentDidMount() {
    this.websocket = new WebSocket('ws://example.com/socket');

    this.websocket.onopen = () => {
        console.log('WebSocket Connected');
    };

    this.websocket.onmessage = (e) => {
        const message = JSON.parse(e.data);
        this.handleMessage(message);
    };

    this.websocket.onerror = (e) => {
        console.error('WebSocket Error: ', e);
    };

    this.websocket.onclose = (e) => {
        console.log('WebSocket Disconnected');
    };
}

handleMessage(message) {
    this.setState({ data: message });
}

componentWillUnmount() {
    if (this.websocket) {
        this.websocket.close();
    }
}

import React, { Component } from 'react';

class WebSocketComponent extends Component {
    state = {
        data: null
    };

    componentDidMount() {
        this.websocket = new WebSocket('ws://example.com/socket');

        this.websocket.onopen = () => {
            console.log('WebSocket Connected');
        };

        this.websocket.onmessage = (e) => {
            const message = JSON.parse(e.data);
            this.handleMessage(message);
        };

        this.websocket.onerror = (e) => {
            console.error('WebSocket Error: ', e);
        };

        this.websocket.onclose = (e) => {
            console.log('WebSocket Disconnected');
        };
    }

    componentWillUnmount() {
        if (this.websocket) {
            this.websocket.close();
        }
    }

    handleMessage(message) {
        this.setState({ data: message });
    }

    render() {
        return (
            <div>
                <h1>Received Data</h1>
                <p>{this.state.data ? JSON.stringify(this.state.data) : 'No data received yet'}</p>
            </div>
        );
    }
}

export default WebSocketComponent;