React中基于二维数组的文本输入框无法更新问题排查

核心问题：状态更新违反不可变性原则 #

输入框不更新的根源在于updateUserSolution直接修改了原状态数组，React依赖状态的引用变化触发重渲染。代码里const grid = userSolution;只是复制了原数组的引用，修改grid元素本质还是修改原状态，调用setUserSolution(grid)时，React发现引用未变，不会触发组件重渲染，导致页面无更新。

修复状态更新逻辑 #

修改updateUserSolution，每次更新都创建全新的二维数组副本，确保状态引用发生变化：

function updateUserSolution(cell, rowIndex, colIndex) {
  // 复制每一行，生成全新的二维数组
  const newGrid = userSolution.map(row => [...row]);
  newGrid[rowIndex][colIndex] = cell;
  setUserSolution(newGrid);
}

解决新谜题切换问题 #

用value绑定受控组件是正确方案，新谜题生成时需同步重置userSolution状态，使其与新谜题结构匹配：

// 生成新谜题后调用此函数重置用户输入数组
function resetUserSolution(newPuzzle) {
  const board = newPuzzle[1];
  // 遍历新谜题单元格：预填值保留，空单元格设为空字符串
  const newUserSolution = board.map(row => 
    row.map(cell => cell === '' ? '' : cell)
  );
  setUserSolution(newUserSolution);
}

保持输入框受控逻辑 #

原printSudoku中的value绑定逻辑无需改动，继续保留即可：

<input 
  type="text" 
  key={j} 
  value={cell === '' ? userSolution[i][j] : cell} 
  className="Puzzle-cell" 
  disabled={cell !== ''}
  style={{
    backgroundColor: (((j < 3 || j >= 6) && (i < 3 || i >=6)) || (j >= 3 && j <6 && i >=3 && i < 6)) ? 'lightgray' : 'white', 
    fontWeight: (cell !== '') ? 'bolder' : 'normal'
  }}
  onChange={(e) => updateUserSolution(e.target.value, i, j)}
/>

修改后，输入框会随userSolution状态变化实时更新，新谜题生成时调用resetUserSolution，即可正确重置用户输入并渲染新棋盘。

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