套接字响应后 Chess.js 不更新反应状态

问题描述

我正在使用 React,Node,Socket.io 制作在线国际象棋游戏。内部反应环境国际象棋游戏运行良好。但是当我试图让它实时时，它失败了。 我试图将玩家做出的动作从反应发送到节点套接字，然后 socket 广播该动作并发送回反应。这是 useEffect 运行以更新对手移动的地方。但这并没有发生，在移动另一个用户正在玩的第二个选项卡后，他的棋盘不会更新。我遵循了一些片段，我认为我写的每一件事都与它们相似，但仍然失败。

我正在使用 ChessBoardjsx,chess.js（内部反应）

反应组件

  let socket;
    socket = io.connect("http://localhost:5000/");

    const [chess] = useState(
        new Chess("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1")
    );
    const [fen,setFen] = useState('');

 useEffect(() => {
        return () => {
            socket.off();
        }
    })
    useEffect(() => {
        setFen(chess.fen());
    },[fen])

    useEffect(() => {
        socket.on('opponentMove',({ from,to }) => {
            chess.move({ from,to });
            setFen(chess.fen());
        });
    },[chess])


    const handleMove = ({ from,to }) => {
        var move = chess.move({ from,to });
        if (move === null) return 'snapback';
        else setFen(chess.fen())
        socket.emit('move',{ from,to })
    };

 return (
        <>
            <Chessboard
                position={fen}
                width={525}
                onMouSEOverSquare={onMouSEOverSquare}
                onMouSEOutSquare={onMouSEOutSquare}
                squareStyles={squareStyles}
                onDrop={(move) =>
                    handleMove({
                        from: move.sourceSquare,to: move.targetSquare,promotion: "q",})
                }
            />
        </>
    )

节点后端

    socket.on('move',({from,to}) => {
        socket.broadcast.emit('opponentMove',{from,to})
    })

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）