Javascript 从useEffect连接socket.io

我想从

useffect

连接我的

socket

连接，就像

componentDidMount

const Chat = () => {
  const [user, setUser] = useState('');
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [isConnected, setIsConnected] = useState(false);

  const socketRef = useRef(
    io('http://localhost:3002', {
      query: { token }
    })
  );

  useEffect(() => {
    socketRef.current.on('connected', msg => {
      console.log('connected');
      setUser(msg.user);
      setIsConnected(true);
      socketRef.current.on('message', message => {
        setMessages(messages => [...messages, message]);
      });
    });
  }, []);

  const inputChangeHandler = e => setInput(e.target.value);

  const sendMessage = () => {
    socketRef.current.emit('newMessage', `${user}: ${input}`);
    socketRef.current.on('messages', newMessages => setMessages(newMessages));
    setInput('');
  };

  if (!isConnected) {
    return <h1>Waiting for connection...</h1>;
  }
  return (
    <div className={cx('chat-container')}>
      <div className={cx('messages-container')}>
        <div className={cx('message-container')}>Greetings {user}!!!</div>
        {messages.map((message, index) => (
          <div className={cx('message-container')} key={index}>
            {message}
          </div>
        ))}
      </div>
      <div className={cx('inputs-container')}>
        <input
          className={cx('input')}
          value={input}
          onChange={e => inputChangeHandler(e)}
        />
        <button className={cx('send-button')} onClick={sendMessage}>
          Send
        </button>
      </div>
    </div>
  );
};

export default Chat;

const Chat=（）=>{
const[user，setUser]=useState（“”）；
const[messages，setMessages]=useState（[]）；
const[input，setInput]=useState（“”）；
const[isConnected，setIsConnected]=使用状态（false）；
const socketRef=useRef(
io（'http://localhost:3002', {
查询：{token}
})
);
useffect（（）=>{
socketRef.current.on（'connected'，msg=>{
console.log（'connected'）；
setUser（msg.user）；
setIsConnected（true）；
socketRef.current.on（'message'，message=>{
设置消息（消息=>[…消息，消息]）；
});
});
}, []);
constInputChangeHandler=e=>setInput（e.target.value）；
const sendMessage=（）=>{
emit（'newMessage'，`${user}:${input}`）；
socketRef.current.on（'messages'，newMessages=>setMessages（newMessages））；
设置输入（“”）；
};
如果（！未连接）{
返回等待连接。。。；
}
返回(
问候{user}！！！
{messages.map（（消息，索引）=>(
{message}
))}
inputChangeHandler（e）}
/>
发送
);
};
导出默认聊天；

它应该显示“等待连接…”，然后当我的代码到达

useffect

时，它应该连接我的组件，然后用内容重新提交，但不是这样，我应该在每次运行react服务器时手动刷新页面。刷新后，我的代码完全按照我的设想工作

---

它似乎没有及时收到事件。

您遇到了什么问题？它是否显示永远等待连接的

或..？@CertainPerformance是的，如果它永远不连接地运行该消息，我应该刷新页面以获得连接。请尝试将socketRef置于useEffect依赖项中。并将console.log放入use effect以查看何时调用它check useffect（（）=>{console.log（socketRef.current）…}当该方法被激发时，您在该方法中拥有什么。您的代码外观正常是奇怪的行为，您可能希望在
useffect（）中抛出您的
io（）
调用
同样，每次
聊天
重新呈现时，您都会打开一个新的套接字连接。还有，为什么要在
发送消息
中添加另一个侦听消息

？最后，您不会在任何地方关闭连接。

useffect（）

回调应返回一个关闭连接的函数。