我知道这与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的异步特性有关,但是让我解释一下这个问题,因为我已经花了一段时间了。问题:我有一些数据要来...
以组件状态存储table_data
,然后使用setState
(或在功能组件中,以useState
钩子进行更新:]
将套接字功能放入其他函数中,然后从安装中调用该函数。您必须在卸载期间断开连接,否则同一客户端将具有多个套接字连接。寻找临时模式以将套接字连接公开给多个组件(稍后将需要)。您是否还在构造函数中启动了this.socket?我非常确定,将与io.connect()一起使用。
这里要注意的两件事: