FluentUI DetailsList项状态已更新但组件渲染异常求助

问题原因 #

点击按钮修改行颜色时，若直接修改原数组中对象的属性，数组本身的引用并未改变。React依赖浅比较判断状态变化，数组引用不变的情况下，组件不会触发重渲染，导致UI无更新；而排序操作会生成新的数组引用，触发重渲染后颜色才会变化。

修复步骤 #

1. 修改按钮点击的处理逻辑，通过创建新数组和对象保持状态不可变性：

const handleToggleHighlight = (id: number) => {
  setDatas(prevDatas => 
    prevDatas.map(row => 
      row.id === id ? {...row, isHighlighted: !row.isHighlighted} : row
    )
  );
};

2. 确保行样式正确绑定isHighlighted状态：

<tr style={{ backgroundColor: row.isHighlighted ? 'yellow' : 'white' }}>

修改后，点击按钮会生成新的数组与对象，React能检测到状态变化并触发重渲染，行颜色会立即更新。

内容的提问来源于stack exchange，提问作者Dhawooth Ibnu Shahaman