反应棋盘与 chess.js 未捕获的 TypeError

Question

我正在尝试将带有 chess.js 的 react-chessboard 实施到我的网站，以便我可以评估用户可以自己创建的 position，我不是要验证合法的动作。 这是我的代码：

import React from 'react';

import {useState} from 'react';
import {Chessboard} from 'react-chessboard';
import {Chess} from 'chess.js';

const Board = () => {
    const [game, setGame] = useState(new Chess());

    const makeMove = (move) => {
        const gameCopy = {...game};
        gameCopy.move(move);
        setGame(gameCopy);
        return;
    }

    const onDrop = (startSquare, endSquare) => {
        makeMove({
            from: startSquare,
            to: endSquare,
        });
        return;
    }


  return <Chessboard position={game.fen()} onPieceDrop={onDrop} />;

}

export default Board;

当我尝试在网页上移动时出现此错误：Uncaught TypeError: gameCopy.move is not a function。

该代码直接来自 react-chessboard 文档，所以我不确定为什么会出现错误。

我怎样才能解决这个问题？

谢谢

Answer 1

它似乎认为 gameCopy.move 不是 function，您尝试在此处这样使用它： gameCopy.move(move); .

我不熟悉 react-chessboard 文档，但是你对代码进行了任何更改吗？ 大多数情况下，如果您有这样的 function，那要么是您没有启动 gameCopy，要么是您忘记导入某些东西。

Answer 2

我相信你错误地导入了 chess.js

你正在做的：

import {Chess} from 'chess.js';

反应棋盘文档显示：

import Chess from "chess.js";

Answer 3

react-chessboard 中示例的依赖项显示 chess.js 版本“^0.12.0”，您可以安装该版本，该示例将按预期工作。 在撰写本文时，chess.js 的版本为“1.0.0-alpha.0”，它会出现您描述的问题，因为正在进行的游戏被编写为 class 'Chess'，您在 useState() 定义中对其进行了实例化. 当您在 gameCopy 中传播 {...game} 时，您会丢失 class 方法并且只保留变量。

为了与最新版本的 chess.js 集成，我建议将 fen 存储在 state 中，并在进行有效移动时更新它。

const Board = () => {
    const [game] = useState(new Chess());
    const [fen, setFen] = useState(game.fen());

    const makeMove = (move) => {
        // this prevents invalid moves, since they would return null
        if(game.move(move)) {
            setFen(game.fen());
        }    
    }

    const onDrop = (startSquare, endSquare) => {
        makeMove({
            from: startSquare,
            to: endSquare,
        });
    }


  return <Chessboard position={fen} onPieceDrop={onDrop} />;

}