React中按键操作后组件不重绘的问题解决问询

核心问题确实是你推测的：React依赖状态的不可变更新来触发重渲染。如果直接修改原对象的属性，状态的引用没有发生变化，React的浅比较机制会认为状态没更新，自然不会触发组件重绘。用Math.random()强制重绘无效，大概率是因为你没同步更新Desk组件依赖的核心状态（也就是存储desk位置的JSON数据），只是额外加了个无关状态，子组件的props没变化，所以还是不重绘。

下面是具体的修改方案：

1. 用不可变方式更新desk状态 #

假设你的父组件中，存储desk列表的状态是desks（一个数组，每个元素是包含位置信息的对象），按键更新位置时，必须返回新的数组，且被修改的desk是新的对象，不能直接修改原数组或原对象。

示例代码：

// 父组件中的按键处理函数
const handleArrowKey = (targetDeskId, direction) => {
  setDesks(prevDesks => {
    // 遍历原数组，返回新数组
    return prevDesks.map(desk => {
      if (desk.id === targetDeskId) {
        // 对需要更新的desk，创建新对象并修改位置
        return {
          ...desk, // 复制原对象的所有属性
          x: direction === 'left' ? desk.x - 10 : direction === 'right' ? desk.x + 10 : desk.x,
          y: direction === 'up' ? desk.y - 10 : direction === 'down' ? desk.y + 10 : desk.y
        };
      }
      // 不需要更新的desk，直接返回原引用即可
      return desk;
    });
  });
};

这样每次更新时，desks的引用会变成新数组，被修改的desk也是新对象，React能检测到状态变化，触发父组件和对应的Desk子组件重绘。

2. 检查Desk组件的props接收逻辑 #

如果你的Desk组件用了React.memo做性能优化，要确保组件的props是浅比较能识别的变化：

// Desk组件示例，确保用新的desk对象作为props
const Desk = React.memo(({ desk }) => {
  return (
    <div style={{ left: desk.x, top: desk.y, position: 'absolute' }}>
      {/* 组件内容 */}
    </div>
  );
});

当desk是新对象时，React.memo的浅比较会发现props变化，触发Desk组件重绘。如果没使用React.memo，只要父组件重绘，子组件会自动跟着重绘，前提是父组件的状态更新正确。

3. 避免常见错误 #

• 禁止直接修改原状态对象：比如desks[0].x += 10这种写法，修改的是原对象的属性，状态引用没变化，React不会触发重绘。
• 禁止使用修改原数组的方法：比如push、pop、splice，这些方法会直接改变原数组的引用，应该用map、filter、concat或展开运算符([...prevDesks])来生成新数组。

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