socket.io useEffect 清理函数 react
Posted
技术标签:
【中文标题】socket.io useEffect 清理函数 react【英文标题】:socket.io useEffect cleanup function react 【发布时间】:2022-01-07 11:37:24 【问题描述】:我在组件内部调用 socket.on 函数,但我想在组件卸载时停止它, 我正在使用功能组件。
useEffect(() =>
socket.on("new-chat-message", (firstname, lastname, content, date) =>
dispatch(
addMessage(
firstname: firstname,
lastname: lastname,
content: content,
date: date,
)
);
);
, [dispatch, socket]);
我需要知道如何为这个useEffect设置清理功能。
【问题讨论】:
【参考方案1】:如文档here中所述
useEffect(() =>
const callback = (firstname, lastname, content, date) =>
dispatch(
addMessage(
firstname: firstname,
lastname: lastname,
content: content,
date: date,
)
);
socket.on("new-chat-message", callback);
return () =>
socket.off("new-chat-message", callback);
, [dispatch, socket]);
【讨论】:
以上是关于socket.io useEffect 清理函数 react的主要内容,如果未能解决你的问题,请参考以下文章
带有 socket.io 状态的 UseEffect 钩子在套接字处理程序中不持久
使用 socket.io 将新的数组更改应用到 useEffect 并更改流
删除组件后如何清理react js中的useEffect函数