Javascript 如何使用socket.io和react useffect（）生成简单消息

我想使用socket.io和react

useffect（）

进行简单的消息传递设置，但我不知道如何从

useffect

内部正确管理/更新状态。 这是我的代码：

  function App() {
    const [messages, setMessages] = useState([{ type: "system", text: "Please stay nice!" }]);
    useEffect(() => {
      socket.current.on("messageSent", (data) => {
        setMessages([...messages, { type: "you", text: data.message }]);
      });

      socket.current.on("receiveMessage", (data) => {
        setMessages([...messages, { type: "partner", text: data.message }]);
      });
    }, []);

    return (
      <>
        <span className="container">
          <Chat messages={messages} />
        </span>
      </>
    );
  }

函数应用程序（）{
const[messages，setMessages]=useState（[{type:“system”，text:“请保持友好！”}）；
useffect（（）=>{
socket.current.on（“messageSent”，（数据）=>{
setMessages（[…messages，{type:“you”，text:data.message}]）；
});
socket.current.on（“receiveMessage”（数据）=>{
setMessages（[…messages，{type:“partner”，text:data.message}]）；
});
}, []);
返回(
);
}

关键是我不想重新运行

useffect（）

，我希望它在开始时运行一次以设置套接字回调。

---

现在，当我尝试从我的

useffect

内部访问消息时，我只得到了起始值

[{type:“system”，text:“Please stance nice！”}

而且

setMessages

不会刷新父组件的

props

，子组件只能访问该起始值

[{type:“系统”，文本：“请保持友好！”}]

您的useEffect似乎设置正确。当您说“setMessages（）”不影响状态时，您的意思是正在访问该代码吗？我认为您没有正确地将数据发送到套接字侦听器，而“setMessages（）”没有影响状态“从不运行。我的套接字连接工作正常，我确信setMessages被正确调用（我已对此进行了测试）。我已经更新了我的问题（最后一部分），当组件装载时，您的useEffect只运行一次，因为您给它一个空数组作为第二个参数。试着这样写：

setMessages（prev=>[…prev，{type:“you”，text:data.message}]）是的，你是对的，把这个写下来作为答案，如果你愿意，我会接受的。太好了！如果要设置依赖于前一个状态的状态，请始终这样编写，以确保始终获得最新状态。