React - 状态重置为 UseEffect 钩子内的空数组

Question

我正在使用 Socket.io，但我不明白为什么我的“消息”状态在 useEffect 中总是返回一个空数组。

我原以为当我调用“setMessages”时，它会将“messages”从一个空数组更新为一个带有新对象的数组。

第二次调用 socket.on('message') 时，state 将在数组中有一个对象，当我再次调用 setMessages 时，它会将第二个对象推送到它上面。

但它似乎总是空的，有什么想法吗？

谢谢

const [messages, setMessages] = useState<Array<Message>>([]);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
  socket.on('connect', () => {
    console.log('user connected');
    socket.on("message", (message: Message) => {
      console.log(messages); // This is always an empty array
      setMessages([...messages, message]); // But here I set the state to a copy of the state plus 'message' which is an object with an id and message property.
    });
  });
}, [messages]);