时间戳

首页 > 解决方案 > 如何在触发 useEffect 挂钩之前等待来自 redux 存储的数据？

node.js - 如何在触发 useEffect 挂钩之前等待来自 redux 存储的数据？

问题描述

我目前正在开发一个使用 React、Redux 和 Socket.io 的应用程序。当用户登录并进入消息页面时，socket 和 room 会按原样创建。但是，当我单击刷新时，似乎我的 useEffect 函数在从 redux 存储接收数据之前触发，该函数正确设置了套接字和房间。有没有人遇到过这样的问题？如果是这样，你如何解决它？提前致谢

编辑：刚刚尝试使用 setTimeout() 并且仍然产生相同的结果。我很茫然。任何帮助，将不胜感激

这是代码：

import Sidebar from './Sidebar';
import { Container, Col, Row, Card } from 'react-bootstrap';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { receiveMessage } from '../../actions/conversation';
//Socket.IO import
import io from 'socket.io-client';

const Messenger = ({ auth, receiveMessage }) => {
  const [socket, setSocket] = useState(null);

  const setupSocket = () => {
    const id = auth.userNumber;
    console.log('fdhsafidhsafkdjsafhdusafhdsafidgsafdusa', id);
    if (!socket) {
      const newSocket = io('http://localhost:5000', {
        query: {
          id: id,
        },
      });

      newSocket.on('disconnect', () => {
        setSocket(null);
        setTimeout(setupSocket, 3000);
      });

      newSocket.on('receive-message', (message) => {
        console.log('socket.io-client message', message);
        receiveMessage(message);
      });
    }
    // return () => newSocket.close();
  };

  useEffect(async () => {
    await setupSocket();   <=== Problem is here
  }, []);
return (
    <div>
      <Sidebar />
    </div>
  );
};

Messenger.propTypes = {
  auth: PropTypes.object.isRequired,
  receiveMessage: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
});

export default connect(mapStateToProps, { receiveMessage })(Messenger);```

标签： node.jsreactjsreduxreact-reduxsocket.io

解决方案

事实证明，从本质上讲，套接字在刷新时会被破坏。转到此处了解更多信息：刷新后保持 WebSocket 连接处于活动状态

推荐阅读