Есть ли способ сопоставить дочерний компонент и родительский компонент в React, я получаю странные результаты

buttonId и boardRowIndex для всех кнопок и строк здесь одинаковы. Когда вы увеличиваете buttonId в одной строке, это влияет на нумерацию в других строках.

Попробуйте создать метод, который создаст для вас идентификатор: сохраните отдельные значения buttonId для каждой строки и соответствующим образом вычислите значения идентификатора.

Попробуйте приведенный ниже код.

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, заключается в том, что вы воссоздаете дочерний компонент при каждом рендеринге родительского компонента. Это связано с тем, что вы используете свойство key для создания уникального ключа для каждого дочернего компонента, но не передаете свойство id дочернему компоненту.

Чтобы исправить это, вы можете передать свойство id из родительского компонента в дочерний компонент, используя ключевое свойство. Это гарантирует, что дочерний компонент будет воссоздан только при изменении свойства 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, для управления состоянием платы. Это позволит вам централизованно отслеживать идентификатор и другое состояние платы, а также обновлять состояние платы без необходимости повторной визуализации всего дерева компонентов.

Другой способ решить эту проблему — использовать виртуальную библиотеку DOM, например React Fiber. React Fiber позволяет обновлять DOM без необходимости повторной визуализации всего дерева компонентов. Это может сделать ваше приложение более быстрым и отзывчивым.