React父子组件映射异常：3x3方格按钮编号错误求助

问题原因 #

你遇到的按钮编号从4开始且跳号的问题，核心是在组件内部用全局变量（buttonId、boardRowIndex）追踪计数。React开发模式下的StrictMode会强制组件双渲染（用于检测副作用），加上组件重渲染时这些变量不会自动重置，只会在组件初始化时赋值一次，导致计数被重复累加，最终出现编号混乱。

需求合理性 #

给井字棋的每个格子分配1-9的连续编号完全合理，不管是后续实现落子逻辑、状态追踪还是用户交互反馈，都是非常实用的设计。

优化实现方式 #

方式1：基于索引纯计算编号（最简洁）

完全通过行、列索引计算全局编号，不需要任何可变变量，彻底避免重渲染导致的计数异常：

import { useState } from "react";

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

  // 接收行索引，用于计算当前行按钮的全局编号
  function BoardRow({ rowIndex }) {
    return (
      <div className="board-row">
        {[0, 1, 2].map(colIndex => {
          // 行索引*3 + 列索引 +1 → 得到1-9的连续编号
          const buttonId = rowIndex * 3 + colIndex + 1;
          return <SquareButton key={buttonId} id={buttonId} />;
        })}
      </div>
    );
  }

  return (
    <>
      {[0, 1, 2].map(rowIndex => (
        <BoardRow key={rowIndex} rowIndex={rowIndex} />
      ))}
    </>
  );
}

这种方式符合React的声明式编程思想，逻辑清晰，无论组件渲染多少次，编号都会保持准确。

方式2：结合状态管理（适配后续扩展）

如果后续需要给格子添加点击状态（比如X/O标记），可以直接用useState维护状态数组，同时关联编号：

import { useState } from "react";

export default function Board() {
  // 初始化9个格子的状态，数组索引0-8对应编号1-9
  const [squares, setSquares] = useState(Array(9).fill(null));

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

  function BoardRow({ rowIndex }) {
    return (
      <div className="board-row">
        {[0, 1, 2].map(colIndex => {
          const squareIndex = rowIndex * 3 + colIndex;
          const buttonId = squareIndex + 1;
          return (
            <SquareButton
              key={squareIndex}
              id={buttonId}
              value={squares[squareIndex]}
            />
          );
        })}
      </div>
    );
  }

  return (
    <>
      {[0, 1, 2].map(rowIndex => (
        <BoardRow key={rowIndex} rowIndex={rowIndex} />
      ))}
    </>
  );
}

这种方式和官方教程的后续扩展逻辑对齐，状态管理更规范，也能稳定生成正确的编号。

核心总结 #

React组件的渲染是声明式的，不能依赖组件内部的可变变量来生成UI内容，必须通过props、状态或者纯计算的方式推导UI，这样才能保证渲染逻辑的稳定性和可维护性。

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