我有一个类似这样的Reaction组件，我在其中设置了一个WebSocket，并在WebSocket事件上try 在Redux内部更新状态
const Body = () => {
// Hook for Redux dispatch
const dispatch = useDispatch();
// REDUX reducers
const workCenterAvailabilityQueue = useSelector(selectAllWorkCenterAvailabilities)
// Add or Update workCenterAvailability
let existingWorkCenter;
const workCenterAvailabilityHandler = (id, data) => {
console.log('id = ', id)
console.log('data = ', data)
console.log(workCenterAvailabilityQueue)
existingWorkCenter = workCenterAvailabilityQueue.find(bm => bm.WorkCenter.WorkCenter_ID === id);
console.log(existingWorkCenter)
if (existingWorkCenter) {
console.log('WorkCenter exists, updating data!')
dispatch(updateWorkCenterAvailability({
id: existingWorkCenter.id,
changes: { Connection_Status: data.Connection_Status }})
);
}
else {
console.log('WorkCenter does not exist, creating one!')
dispatch(addWorkCenterAvailability(data));
}
}
// Debugging
useEffect(() => {
console.log('Updated state:', workCenterAvailabilityQueue);
if(workCenterAvailabilityQueue[10]){
console.log('workCenterAvailabilityQueue[10] -> ', workCenterAvailabilityQueue[10])
}
console.log('\n')
}, [workCenterAvailabilityQueue]);
// Web Socket setup
useEffect(() => {
console.log('connecting to Flask socket')
const socket = io('http://localhost:5000');
console.log('Start listening')
socket.on('workCenterAvailability', (data) => {
workCenterAvailabilityHandler(data.WorkCenter.WorkCenter_ID, data)
});
console.log('emitting message')
socket.emit('requestWorkCenterAvailability');
console.log('emitted!')
// Clean up function
return () => {
socket.disconnect();
};
}, []);
所以我的问题是，当我try 使用处理程序函数时，workCenterAvailabilityQueue总是作为空数组返回，所以当我试图在队列中查找对象时，它总是失败
但是，基于位于调试目的底部的useEffect挂钩，我可以看到，每次向队列添加内容时，实际上都会将其添加到Redux
为什么我的workCenterAvailabilityQueue不包含实时信息？