使用react-chessboard+chess.js报错：gameCopy.move不是函数的解决方法

错误原因 #

你用{...game}复制Chess类实例的方式是错误的。对象展开运算符只能复制实例的可枚举属性，而Chess类的move等方法并不会被复制到新对象中，导致gameCopy变成了一个普通对象，自然不存在move方法。

修复方案 #

方法1：使用Chess实例自带的clone()方法 #

chess.js的实例提供了clone()方法，可以完整复制一个包含所有方法的Chess实例：

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

方法2：通过FEN字符串重新创建Chess实例 #

如果clone()方法不可用，也可以利用当前棋局的FEN字符串，重新初始化一个Chess实例：

const makeMove = (move) => {
    const gameCopy = new Chess(game.fen());
    gameCopy.move(move);
    setGame(gameCopy);
}

完整修复后的代码 #

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.clone();
        // 如果不需要验证走法合法性，可添加sloppy参数强制允许任意走法
        gameCopy.move(move, { sloppy: true });
        setGame(gameCopy);
    }

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

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

export default Board;

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