使用React+Socket.io开发卡牌游戏时出现Socket无限循环问题求助

• 你使用的useEffect未指定依赖数组，会在组件每次渲染时都重复执行：新增socket事件监听器、发送getGamesList请求。
• 服务端返回数据后调用setGamesList更新状态，会触发组件重新渲染，再次执行useEffect逻辑，最终形成无限循环。

1. 调整useEffect逻辑，添加依赖和清理函数 #

修改GamesList组件的useEffect代码如下：

useEffect(() => {
    const updateGameList = (listData) => {
        // 建议存储原始数据，渲染阶段再生成JSX元素，提升状态可维护性
        setGamesList(listData);
    };
    // 注册socket事件监听
    param.socket.on(socketListener, updateGameList);
    // 向服务端请求游戏列表
    param.socket.emit("getGamesList", saboteurVersion.version);

    // 组件卸载或依赖变更时移除监听器，避免重复监听和内存泄漏
    return () => {
        param.socket.off(socketListener, updateGameList);
    };
// 明确指定依赖：仅当socket实例、游戏版本变化时才重新执行副作用
}, [param.socket, saboteurVersion.version]);

2. 调整渲染逻辑 #

在组件的返回渲染逻辑中，直接使用gamesList生成TableRow元素即可：

return (
    // 其他组件内容
    {gamesList?.map((element, indx) => <TableRow {/* 传对应属性 */} key={indx} />)}
    // 其他组件内容
)

• 服务端代码中的saboteur1List、saboteur2List需要提前定义赋值，避免服务端抛出未定义错误。
• 如果你需要实时更新游戏列表，可以在服务端游戏列表发生变更时主动向客户端推送消息，无需客户端轮询请求。

内容的提问来源于stack exchange，提问作者ucios