如何解决React State未使用socket.io
首次加载页面时,我需要获取所有信息,这就是为什么我要调用获取请求并将结果设置为State的原因[singleCall函数完成该工作] 与此同时,我正在使用socket.io连接websocket并监听两个事件(odds_insert_one_two,odds_update_one_two),当我收到通知事件时,我必须 检查以前的状态并修改一些内容并更新状态,而无需再次调用获取请求。但是该先前状态仍为[](初始)。 如何获取更新状态?
摘要
const [leagues,setLeagues] = useState([]);
const singleCall = (page = 1,params=null) => {
let path = `${apiPath.getLeaguesMatches}`;
Helper.getData({path,page,params,session}).then(response => {
if(response) {
setLeagues(response.results);
} else {
toast("Something went wrong,please try again");
}
}).catch(err => {
console.log(err);
})
};
const updateData = (record) => {
for(const data of record) {
var {matchId,pivotType,rateOver,rateUnder,rateEqual} = data;
const old_leagues = [...leagues]; // [] becuase of initial state value,that is not updated
const obj_index = old_leagues.findIndex(x => x.match_id == matchId);
if(obj_index > -1) {
old_leagues[obj_index] = { ...old_leagues[obj_index],rateOver: rateOver,rateUnder:rateUnder,rateEqual:rateEqual};
setLeagues(old_leagues);
}
}
}
useEffect(() => {
singleCall();
var socket = io.connect('http://localhost:3001',{transports: ['websocket']});
socket.on('connect',() => {
console.log('socket connected:',socket.connected);
});
socket.on('odds_insert_one_two',function (record) {
updateData(record);
});
socket.on('odds_update_one_two',function (record) {
updateData(record);
});
socket.emit('get_odds_one_two');
socket.on('disconnect',function () {
console.log('socket disconnected,reconnecting...');
socket.emit('get_odds_one_two');
});
return () => {
console.log('websocket unmounting!!!!!');
socket.off();
socket.disconnect();
};
},[]);
解决方法
useEffect
挂钩是使用空的依赖项数组创建的,因此在初始化阶段仅被调用一次。因此,如果league
状态被更新,则其值将在updateData()
函数中永远不可见。
您可以做的是将league
的值分配给ref
,并创建一个新的hook
,该值每次都会更新。
const leaguesRef = React.useRef(leagues);
React.useEffect(() => {
leaguesRef.current = leagues;
});
将leagues
更新为leaguesRef.current
。
const updateData = (record) => {
for(const data of record) {
var {matchId,pivotType,rateOver,rateUnder,rateEqual} = data;
const old_leagues = [...leaguesRef.current]; // [] becuase of initial state value,that is not updated
const obj_index = old_leagues.findIndex(x => x.match_id == matchId);
if(obj_index > -1) {
old_leagues[obj_index] = { ...old_leagues[obj_index],rateOver:
rateOver,rateUnder:rateUnder,rateEqual:rateEqual};
setLeagues(old_leagues);
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。