React自定义可编辑网格删除行后TextField保留旧值求助

核心原因 #

DetailsList 出于性能优化会复用列表项组件，你的 TextField 可能依赖了 defaultValue 而非绑定实时的 value，或者组件没有正确关联到对应数据项的唯一标识，导致删除行后复用的 TextField 保留了旧值。

具体修复步骤 #

• 绑定实时 value 而非 defaultValue：把 TextField 的 defaultValue 换成 value，直接绑定当前列表项的对应属性，确保显示的是最新数据。
• 正确处理 onChange 更新状态：在 TextField 的 onChange 事件里，更新对应列表项的属性，同时确保生成新的数组引用（避免直接修改原数组，保证 React 能检测到状态变化）。
• 确保列表项有唯一标识：给每个数据项添加唯一的 id 字段（比如后端返回值、索引结合时间戳），帮助 React 正确识别组件身份，避免复用错误。

关键代码示例 #

// 初始化带唯一ID的数据源
const initialItems = [
  { id: 'item-1', name: 'John', color: 'Blue' },
  { id: 'item-2', name: 'Beagal', color: '' }
];

// 自定义颜色列渲染
const colorColumn: IColumn = {
  key: 'color',
  name: 'Favorite Color',
  fieldName: 'color',
  renderItem: (item: any) => (
    <TextField
      // 绑定实时value而非默认值
      value={item.color}
      onChange={(e, newValue) => {
        // 生成新数组更新状态，避免直接修改原数组
        setListItems(prev => prev.map(i => 
          i.id === item.id ? {...i, color: newValue} : i
        ));
      }}
    />
  )
};

// 删除行处理函数
const handleDelete = (targetId: string) => {
  // 过滤生成新数组，确保状态引用变化
  setListItems(prev => prev.filter(item => item.id !== targetId));
};

额外注意事项 #

• 绝对不要直接修改原数组（比如使用 splice 方法），必须返回新的数组实例，React 才能触发正确的重渲染。
• 如果你的数据源原本没有唯一 id，一定要在初始化时补充，这是避免组件复用错误的关键。

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