javascript - 在 reactJS 中将 websocket 流数据传递给 child

Question

constructor(){
    super();
    this.state = {
        chartData : {}
    };        

    let ws = new WebSocket('link');

    ws.onopen = function () {
        console.log('Successfully connected WebSocket!');
    };

    ws.onmessage = function (msg) {
        console.log("Message: " + msg.data);
        try {

            //Parse the message
            let obj = JSON.parse(msg.data);

        }catch(err){
            console.log('Error in onmessage: ' + err);
        }

    };
}
getChartData(){
    this.setState({chartData:[2,3,4,5,6] }) //Want to send obj from onmessage
}

componentWillMount(){
    this.getChartData();

};

render() {
    return (
     <div className="wrap"> 
       <Chart chartData={this.state.chartData} />
    )
}

如果我粘贴了正确的代码，这就可以正常工作了!我在图表组件中获取数据，例如:

 constructor(props){
    super(props);
    this.state = {
        chartData:props.chartData
    };
};

我的问题是，我如何从 ws.onmessage 函数发送 obj，因为这个函数每秒都会接收数据。

Answer 1

您已经将图表数据保持在 state 并将其作为 prop 传递下去。因此，只需让您的 onmessage 监听器在每次获取新数据时更新您的组件 state。

ws.onmessage = (msg) => {
    console.log("Message: " + msg.data);
    try {

        //Parse the message
        let obj = JSON.parse(msg.data);
        this.setState({chartData: obj});

    }catch(err){
        console.log('Error in onmessage: ' + err);
    }
};

请注意，监听器现在是箭头函数，因此它保留了正确的 this 上下文。