我用react.js构建的国际象棋应用程序的一个有问题的函数

// 示例代码
function ChessPiece({ piece }) {
  const handleClick = () => {
    console.log('Piece clicked:', piece);
  };

  return (
    <div onClick={handleClick}>
      {piece}
    </div>
  );
}

// 示例代码
const ChessBoard = React.memo(({ pieces }) => {
  return (
    <div>
      {pieces.map((piece, index) => (
        <ChessPiece key={index} piece={piece} />
      ))}
    </div>
  );
});

// 示例代码
function ChessPiece({ piece }) {
  const handleClick = () => {
    try {
      // 可能引发异常的代码
      if (!piece) throw new Error('Piece is undefined');
      console.log('Piece clicked:', piece);
    } catch (error) {
      console.error('Error:', error.message);
    }
  };

  return (
    <div onClick={handleClick}>
      {piece}
    </div>
  );
}

// 示例代码
function useChessPieceLogic(piece) {
  const handleClick = () => {
    console.log('Piece clicked:', piece);
  };

  return { handleClick };
}

function ChessPiece({ piece }) {
  const { handleClick } = useChessPieceLogic(piece);

  return (
    <div onClick={handleClick}>
      {piece}
    </div>
  );
}