Formik arrayHelpers.remove总是删最后元素，setFieldValue不更新UI问题

核心问题1：ADD LOG按钮的数组元素结构错误 #

点击"ADD LOG"时，你通过arrayHelpers.push传入的是嵌套reject_log数组的对象，但reject_log本身就是Formik管理的数组，每个元素应该是单个日志对象而非嵌套结构。错误的结构会导致后续字段更新路径完全失效，引发数据异常。

修复代码：
将ADD LOG的点击事件代码修改为：

<CustomButton
  type="button"
  onClick={() => {
    arrayHelpers.push({
      reject_id: "",
      reject_time: "",
      reject_status: "",
    });
  }}
>
  ADD LOG
</CustomButton>

核心问题2：RejectTime组件的参数传递错误 #

RejectTime作为React函数组件，必须接收props对象作为第一个参数，但你当前直接传递index和form两个独立参数，导致组件内部参数解析错误：index实际是props对象，form变为undefined，最终setFieldValue使用了错误的字段路径，导致reject_time值被误修改或移除。

修复代码：

1. 修改RejectTime组件定义，改为接收props：

export const RejectTime = ({ index, form }: { index: number; form: any }) => {
  return (
    <FormTimePicker
      placeholder="Reject Time"
      selectSingle
      onChange={(value) => {
        form.setFieldValue(`reject_log[${index}].reject_time`, value[0]);
      }}
    />
  );
};

2. 修改RejectLogEdit中的调用方式：

<TableBodyCell><RejectTime index={index} form={form} /></TableBodyCell>

额外优化建议 #

不要使用数组索引index作为组件的key，当数组元素删除或顺序变化时，会导致React重渲染异常。建议给每个日志对象添加唯一标识（比如id字段），并使用该标识作为key：

// push时添加唯一id
arrayHelpers.push({
  id: Date.now().toString(), // 临时用时间戳，也可使用uuid库生成
  reject_id: "",
  reject_time: "",
  reject_status: "",
});

// 渲染时用id作为key
{formikProps.values.reject_log.map((rejectlog) => (
  <RejectLogEdit
    key={rejectlog.id}
    // ...其他props
  />
))}

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