问题

问题在于，在匿名函数中调用的回调状态的过时闭包实际上实例化了事件处理程序。messageshandleNewMessagesWebSocketNotificationHandleronReceiveMessageshandleWebSocketMessageclient.onmessage

初始空状态数组是实例化事件处理程序和回调时从初始呈现周期开始在作用域中关闭的数组。messages

溶液

如果您只是想附加已发送的消息并附加接收的消息数组，那么您的处理程序实际上应该使用功能状态更新。功能状态更新将回调函数传递给传递当前状态值的状态更新程序函数，然后计算并返回下一个状态值。这避免了您尝试从中更新的状态值的过时闭包问题。GroupPage

例：

const handleMessageSent = (message: ICreateMessageResponse, text: string) => {
  setMessages(messages => [...messages, { /* Message data for a new message */ }]);
  
  // or setMessages(messages => messages.concat({ /* Message data for a new message */ }));
};

const handleNewMessages = (newMessages: IChatMessage[]) => {
  setMessages(messages => [...messages, ...newMessages]);

  // or setMessages(messages => messages.concat(...newMessages));
};

如果要控制台记录状态数组长度，请使用单独的钩子：messagesuseEffect

useEffect(() => {
  console.log(messages.length);
}, [messages]);

如果你真的必须记录状态数组长度，那么使用 React ref 来缓存当前状态值，这样 ref 的当前值就可以在组件生命周期中随时访问。messageshandleNewMessagesmessages

例：

const [messages, setMessages] = useState<IChatMessage[]>([]);

const messagesRef = useRef<IChatMessage[]>(messages);

useEffect(() => {
  messagesRef.current = messages;
}, [messages]);

...

const handleNewMessages = (newMessages: IChatMessage[]) => {
  console.log(messagesRef.current.length);

  setMessages(messages => messages.concat(...newMessages));
};

根据我的理解，当执行函数时，它指向消息的初始状态，即使父组件中的状态已更改，它也是一个空数组。handleWebSocketMessageGroupPage

您可以使用钩子创建函数的记忆版本，这将确保函数始终引用函数的最新版本。useCallbackhandleNewMessagessetMessages

const WebSocketNotificationHandler = (props: WebSocketNotificationHandlerProps) => {

    const handleWebSocketMessage = useCallback(async (ev: MessageEvent<string>) => {
        props.onReceiveMessages([]); // Simplified, normally we send one or more
    }, [props.onReceiveMessages]);

};

这同样适用于组件。.grouppage

const GroupPage = () => {
    const handleNewMessages = useCallback((newMessages: IChatMessage[]) => {
        console.log(messages.length);
        // Code goes here that adds the newMessages to the messages array
    }, [messages]);
};

WebSocketNotificationHandler.tsx：

import { useEffect } from "react";
import config from "../../../config.json";
import { IChatMessage } from "../../../services/chatService";

interface WebSocketNotificationHandlerProps {
  onReceiveMessages: (newMessages: IChatMessage[]) => void;
}

export let client: WebSocket = new WebSocket(
  config.webSocketAddress,
  config.webSocketProtocol
);

const WebSocketNotificationHandler = (
  props: WebSocketNotificationHandlerProps
) => {
  useEffect(() => {
    const handleWebSocketMessage = async (ev: MessageEvent<string>) => {
      props.onReceiveMessages([]); // Simplified, normally we send one or more
    };

    if (client) {
      client.addEventListener("message", handleWebSocketMessage);
    }

    return () => {
      client.removeEventListener("message", handleWebSocketMessage);
    };
  }, []);

  return <></>;
};

export default WebSocketNotificationHandler;

GroupPage.tsx：

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import chatService, { IChatMessage, ICreateMessageResponse } from '../../../services/chatService';
import ChatMessage from '../../atoms/ChatMessage/ChatMessage';
import ChatStagingArea from '../../organisms/ChatStagingArea/ChatStagingArea';
import WebSocketNotificationHandler from '../../organisms/WebSocketNotificationHandler/WebSocketNotificationHandler';

const GroupPage = () => {
  const { groupName } = useParams();
  const [messages, setMessages] = useState<IChatMessage[]>([]);

  const loadGroup = async () => {
    setMessages([]);
    await chatService.getGroup(groupName).then(data => {
      setMessages([...data.data.messages]);
    });
  };

  useEffect(() => {
    loadGroup();
  }, []);

  useEffect(() => {
    const handleNewMessages = (newMessages: IChatMessage[]) => {
      setMessages(prevMessages => [...prevMessages, ...newMessages]);
    };

    return () => {
      WebSocketNotificationHandler.client.removeEventListener("message", handleNewMessages);
    };
  }, [messages]);

  const handleMessageSent = (message: ICreateMessageResponse, text: string) => {
    let newMessages = [...messages, { /* Message data for a new message */ }];
    setMessages(newMessages);
  };

  return (
    <>
      {messages && messages.map(m => <ChatMessage key={m.id} author={m.fullName} date={m.authoredDate} message={m.message} />)}
      <ChatStagingArea groupName={groupName} onSent={(message, text) => handleMessageSent(message, text)} />
      <WebSocketNotificationHandler onReceiveMessages={newMessages => handleNewMessages(newMessages)} />
    </>
  );
};

export default GroupPage;

这些更改可确保正确处理 WebSocket 事件，并在新消息到达时正确更新消息状态。还负责清理 WebSocket 侦听器以防止内存泄漏。