阵列空的socket.on

问题描述 投票:0回答:3

我知道这与javascript的异步特性有关,但是让我解释一下这个问题,因为我已经花了一段时间了。

问题:

我有一些来自服务器的数据。在客户端,我有一个this.socket.on,在其中我要从服务器获取数据,并尝试将其推入在套接字连接开始之前实例化的数组中。我需要数据在套接字连接之外继续存在。

这里是代码...任何帮助将不胜感激:

componentDidMount() {
		this.table_data = [];

		// GET ALL EARTHQUAKES 
	    this.socket = io('localhost:9000', {reconnection: true});

	    this.socket.on('all_quakes_event', (data) => {	    	

		  	if (data) {	    			  				    	
		    	data.features.forEach((el, idx) => {
		    		this.table_data.push(
						{
						    key: el.id,
						    mag: el.properties.mag,
						    time: moment(el.properties.time).format('MMMM Do YYYY, h:mm:ss a'),
						    time_readable: moment(el.properties.time).startOf('hour').fromNow(),
						    title: el.properties.title
					  	},
		    		)		    		
				});				
			} // END IF
	    	console.log(this.table_data); // GOOD
	    }); // END SOCKET EVENT	 

	    console.log(this.table_data); // EMPTY

	}

我知道这与javascript的异步特性有关,但是让我解释一下这个问题,因为我已经花了一段时间了。问题:我有一些数据要来...

javascript node.js reactjs asynchronous socket.io
3个回答
1
投票

以组件状态存储table_data,然后使用setState(或在功能组件中,以useState钩子进行更新:]


0
投票

将套接字功能放入其他函数中,然后从安装中调用该函数。您必须在卸载期间断开连接,否则同一客户端将具有多个套接字连接。寻找临时模式以将套接字连接公开给多个组件(稍后将需要)。您是否还在构造函数中启动了this.socket?我非常确定,将与io.connect()一起使用。


0
投票

这里要注意的两件事:

© www.soinside.com 2019 - 2024. All rights reserved.