所有按钮和行的buttonId和boardRowIndex在这里都是相同的。当您在一行中递增buttonId时，它会影响其他行中的编号。
尝试创建一个方法，为您创建id createId，为每行维护单独的buttonId值，并相应地计算id值。
试试下面的代码。

import React from 'react';

export default function Board() {
  const generateBoard = () => {
    const board = new Array(3).fill(null).map(() => new Array(3).fill(null));
    let currentId = 1;

    return board.map((row) =>
      row.map(() => {
        const id = currentId++;
        return { id, number: id };
      })
    );
  };

  const initialBoard = generateBoard();

  const SquareButton = ({ id, number }) => {
    return <button className="square">{number}</button>;
  };

  const BoardRow = ({ rowButtons }) => {
    const squareButtons = rowButtons.map(({ id, number }) => {
      return <SquareButton key={id} id={id} number={number} />;
    });

    return (
      <div className="board-row">
        {squareButtons}
      </div>
    );
  };

  const boardRows = initialBoard.map((rowButtons, rowIndex) => {
    return <BoardRow key={rowIndex} rowButtons={rowButtons} />;
  });

  return (
    <>
      {boardRows}
    </>
  );
}

在React中Map子组件和父组件时会得到奇怪的结果的原因是因为你在父组件的每次渲染中都重新创建了子组件。这是因为您正在使用key prop为每个子组件生成一个唯一的key，但您没有将id prop传递给子组件。
要解决这个问题，可以使用键prop将id prop从父组件传递给子组件。这将确保子组件仅在id属性更改时重新创建。

import { useState } from "react";

export default function Board() {
  let buttonId = 1;
  let boardRowIndex = 0;

  function SquareButton({ id }) {
    return <button className="square">{id}</button>;
  }

  function BoardRow() {
    const squareButtons = [...Array(3).keys()].map((i) => {
      const squareButton = <SquareButton key={i} id={buttonId} />;

      buttonId++;

      return squareButton;
    });

    return (
      <div className="board-row">
        {squareButtons}
      </div>
    );
  }

  const boardRows = [...Array(3).keys()].map((i) => {
    const boardRow = <BoardRow key={i} />;

    return boardRow;
  });

  // The first squareButton begins at 4 now for some reason, and then skipping out numbers that aren't being displayed
  return (
    <>
      {boardRows}
    </>
  );
}

还有其他一些方法来解决这个问题。一种方法是使用Redux这样的状态管理库来管理板的状态。这将允许您在一个集中的位置跟踪电路板的id和其他状态，并更新电路板的状态，而不必重新呈现整个组件树。
解决这个问题的另一种方法是使用像React Fiber这样的虚拟DOM库。React Fiber允许您更新DOM，而无需重新渲染整个组件树。这可以使您的应用程序更快，响应更快。