React中array.map未渲染全部组件，仅显示一个项的问题

你的FullBoard组件无法正确映射值的核心问题是错误地使用数组索引访问子棋盘。

问题根源 #

在FullBoard的boards.map((board, i)回调里，board本身就是你传入的9个子棋盘数组中的每一个（长度为9的单元格数组），但你却用board[i]去取值——这相当于在每个子棋盘里取第i个元素，而非把整个子棋盘传给Board组件。

举个例子：当i=0时，你取的是第一个子棋盘的第0个元素（单个值），而不是完整的第一个子棋盘数组，这直接导致Board组件拿到的cells不是长度为9的数组，自然无法渲染出完整的小棋盘。

修复后的FullBoard代码 #

import React from 'react'
import Board from './Board'

const FullBoard = ({ boards, onClick }) => {
  return (
    <div className="board-container">
      {boards.map((board, boardIndex) => {
        // 直接传入整个board作为cells，同时传递大棋盘索引+小棋盘单元格索引给父组件
        return (
          <Board 
            key={boardIndex} 
            cells={board} 
            onClick={(cellIndex) => onClick(boardIndex, cellIndex)} 
          />
        )
      })}
    </div>
  )
}

export default FullBoard

额外优化点 #

1. onClick参数补全：原代码只传递了大棋盘索引，父组件无法定位到具体单元格，现在把boardIndex（大棋盘位置）和cellIndex（小棋盘内单元格位置）一起传递，父组件才能正确更新对应状态。
2. 变量命名优化：把i改为boardIndex，让代码逻辑更直观。
3. Board组件冗余参数移除：React的key是特殊保留属性，不需要在组件内部解构接收，修改后的Board组件更规范：

import React from 'react'
import Cell from './Cell'

const Board = ({ cells, onClick }) => {
  return (
    <div className="main-cells">
        {cells.map((cell, cellIndex) => {
          return (<Cell key={cellIndex} value={cell} onClick={() => onClick(cellIndex)} />)
        })}
    </div>
  )
}

export default Board

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