React二维数组状态更新后组件不重新渲染问题求助

你的组件不重新渲染的核心原因是直接修改了原状态数组的引用，React的useState依赖引用变化来检测状态更新——当你修改prev数组的内部元素但返回同一个数组对象时，React会判定状态未发生改变，因此不会触发重渲染。

错误代码分析 #

在updateBoard函数中，你直接修改了原状态数组：

const updateBoard = (row, column, ch) => {
    setBoard(prev => {
        prev[row][column] = ch; // 直接修改原状态数组，引用未变
        return prev;
    })
};

这里的prev是原状态数组的引用，修改它的内部元素后返回同一个引用，React对比新旧状态时发现引用一致，就不会触发组件重渲染。

正确的状态更新方式 #

必须创建原数组的新引用，通过不可变的方式修改状态。对于二维数组，需要同时拷贝外层数组和要修改的内层行：

方法一：展开运算符拷贝

const updateBoard = (row, column, ch) => {
    setBoard(prev => {
        // 拷贝外层数组，生成新的数组引用
        const newBoard = [...prev];
        // 拷贝要修改的行，避免修改原行的引用
        newBoard[row] = [...newBoard[row]];
        // 修改新数组的对应位置
        newBoard[row][column] = ch;
        return newBoard;
    });
};

方法二：使用map遍历生成新数组

const updateBoard = (row, column, ch) => {
    setBoard(prev => 
        prev.map((currentRow, i) => {
            // 不是目标行则直接返回原行
            if (i !== row) return currentRow;
            // 目标行则生成新数组，修改指定列的值
            return currentRow.map((val, j) => j === column ? ch : val);
        })
    );
};

额外提示 #

你的handleClick中查找行的逻辑存在潜在bug：index === board.length永远不会成立（数组索引最大为board.length-1），如果某一列全为空，findIndex会返回-1，计算出的row会是-2，导致数组越界。可以修改为更可靠的逻辑，比如找该列最后一个空行：

const row = board.findLastIndex(rowArr => rowArr[column] === '');

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