ReduxForm问题：标记FieldArray项为待删除时UI未及时更新

这个问题我之前在使用Formik处理FieldArray软删除时也碰到过，核心问题出在你先remove再insert的操作逻辑上——这种方式会打乱数组索引的对应关系，导致Formik的状态更新没有及时触发UI重新渲染，尤其是操作后面的列表项时，就会出现你说的“要聚焦才消失”的延迟问题。

给你几个更可靠的实现方案：

1. 替换remove+insert为直接更新字段 #

不要先移除再插入，而是直接修改对应索引的项，给它加上_destroy: true，这样状态变化更清晰，Formik能立刻感知并触发UI更新：

const handleDelete = (e) => {
  const index = e.target.value;
  const currentItem = fields.get(index);
  
  // 有ID则标记软删除，无ID直接移除（因为不需要提交到API销毁）
  if (currentItem.id) {
    // 直接替换原位置的项，添加_destroy属性
    fields.replace(index, { ...currentItem, _destroy: true });
  } else {
    fields.remove(index);
  }
};

这个逻辑避免了索引混乱的问题，每一步操作都是明确修改原位置的状态，UI会同步更新。

2. 确保渲染时使用稳定的Key #

React列表渲染时，如果用数组索引作为key，当数组元素顺序或数量变化时，React可能不会重新渲染对应的组件，导致UI不更新。所以建议优先用列表项的id作为key，没有id的情况下再用索引：

{fields.map((member, index) => {
  const item = fields.get(index);
  // 过滤已标记删除的项
  if (item._destroy) return null;
  
  return (
    <div key={item.id || index}> {/* 优先用唯一ID，保证key稳定 */}
      {/* 你的表单字段，比如姓名、邮箱等 */}
      <Field name={`${member}.name`} component="input" placeholder="姓名" />
      
      {/* 隐藏的_destroy字段，确保Formik跟踪这个值 */}
      <Field name={`${member}._destroy`} component="input" type="hidden" />
      
      <button value={index} onClick={handleDelete}>删除</button>
    </div>
  );
})}

3. 简化可见性判断逻辑 #

你之前写的isRowVisible函数没问题，但可以直接在渲染时判断，避免额外函数调用的潜在问题：

// 替换原来的isRowVisible，直接在渲染时检查
if (fields.get(index)._destroy) return null;

为什么原来的代码会出问题？ #

当你点击第二个删除按钮时，先执行fields.remove(index)，这时候数组长度减1，原来的第三个项会变成第二个项的索引；接着你又insert回原来的索引位置，这时候插入的项其实是在新的数组末尾，导致UI渲染时的索引对应关系混乱，Formik没有触发即时的重新渲染，只有当聚焦表单元素触发状态校验时，才会重新计算列表的状态，所以才会出现延迟消失的情况。

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