React中react-chessboard与chess.js功能失效原因排查

错误原因 #

你通过{...game}浅拷贝Chess实例的方式是错误的。这种方式只能复制实例自身的可枚举属性，无法继承原型链上的方法（比如move），导致gameCopy并非真正的Chess类实例，调用move方法时自然会报错。

修复方案 #

Chess.js提供了官方的实例复制方式，或者可以通过当前局面的FEN字符串创建新实例。以下是两种可行的修改方式：

方式一：使用Chess实例的clone方法（推荐） #

直接调用Chess实例的clone方法创建完全相同的新实例，该实例会保留所有原型方法：

function changeGame(move){
  const gameCopy = game.clone(); // 用官方clone方法复制实例
  const result = gameCopy.move(move);
  setGame(gameCopy);
  return result;
}

方式二：通过FEN字符串创建新实例 #

利用原游戏的FEN局面字符串，初始化一个新的Chess实例：

function changeGame(move){
  const gameCopy = new Chess(game.fen()); // 用当前局面创建新实例
  const result = gameCopy.move(move);
  setGame(gameCopy);
  return result;
}

完整修复后的代码 #

import {useState} from 'react';
import './App.css';
import {Chess} from "chess.js";
import {Chessboard} from "react-chessboard";

function App() {

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

  function changeGame(move){
    const gameCopy = game.clone();
    const result = gameCopy.move(move);
    setGame(gameCopy);
    return result;
  }

  function makeRandomMove() {
    const possibleMoves = game.moves();
    if (game.game_over() || game.in_draw() || possibleMoves.length === 0)
      return;
    const randomIndex = Math.floor(Math.random() * possibleMoves.length);
    changeGame(possibleMoves[randomIndex]);
  }

  function onDrop(source, target){
    const move = changeGame({
      from: source,
      to: target,
      promotion: "q",
    });

    if (move === null){
      return false;
    }
    setTimeout(makeRandomMove, 200);
    return true;
  }

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

export default App;

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