React中更新二维数组同行元素时useEffect未触发的问题

出现这个差异的核心原因是React的组件复用机制以及对象引用的浅对比逻辑：

• 跨行移动时，原位置的Piece组件因为对应数组项变为null被卸载，新位置会重新挂载Piece组件，因此useEffect会触发（组件挂载时执行）。
• 同一行移动时，由于Piece组件的key是piece.id（未发生变化），React会复用原有组件实例，仅更新piece props。但你是直接修改原对象的x/y属性，piece的引用地址未改变，而React的useEffect依赖对比是浅对比，会判定依赖无变化，因此不会触发。

提供三种可行的解决思路，按需选择：

1. 以具体属性作为useEffect依赖 #

既然实际关心的是piece的位置变化，直接将x和y属性放入依赖数组，无需依赖整个对象：

function Piece({piece}){
    const pieceRef = useRef(null);

    useEffect(() => {
        // 你的业务逻辑代码
    }, [piece.x, piece.y]) // 替换为具体变化的属性

    return ...
}

这种方式最简单，无需修改state更新逻辑，只需明确依赖的变化字段即可。

2. 创建新的piece对象副本 #

更新state时，不要直接修改原对象，通过展开运算符创建新对象，改变piece的引用地址：

// 同一行移动的更新逻辑修改为：
const newPieces = [...pieces];
// 复制目标行，保证数组的不可变更新
newPieces[3] = [...newPieces[3]];
newPieces[3][0] = null;
// 创建新对象并更新x/y属性
newPieces[3][1] = { ...obj, x: 3, y: 1 };
setPieces(newPieces);

这种方式既让useEffect检测到依赖变化触发执行，也符合React的不可变状态更新原则，能避免其他潜在的状态异常问题。

3. 强制组件重新渲染（兜底方案，不推荐） #

给Piece组件添加一个基于位置的props，比如positionKey，用x + '-' + y作为值，当位置变化时，该值会触发组件更新：

// 渲染Piece时传入positionKey
return piece && <Piece key={piece.id} piece={piece} positionKey={`${piece.x}-${piece.y}`}/>

随后在Piece组件中将positionKey加入useEffect依赖即可。注意不建议将其作为组件的key，会导致组件频繁卸载挂载，影响性能。

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