如何在Formik中根据指定ID删除嵌套数组中的对应对象？

现有代码问题 #

• setFieldValue 第一个参数传值错误，你要修改的是嵌套在flightsById下的键，需要拼接完整路径，不能直接传ID字符串
• 不能直接修改formik.values，属于直接变更状态不会触发Formik更新
• 不能在循环/普通函数内部调用useEffect，违反React Hook使用规则

解决方案 #

有两种常用实现方式：

方式1：整体更新对象（更推荐，性能更好）

先复制整个flightsById对象，删除目标键后一次性写回Formik：

// 浅复制原对象，避免直接修改state
const newFlightsById = { ...formik.values.flightsById };
// 删除目标ID对应的条目
delete newFlightsById['EF_700001132'];
// 统一更新Formik值
formik.setFieldValue('flightsById', newFlightsById);

// 验证更新结果，注意Formik的setFieldValue是异步操作，如果要拿最新值可以在formik.onValuesChange回调中获取
console.log("更新后的航班列表", formik.values.flightsById);

方式2：动态路径单键更新

直接通过拼接嵌套路径更新目标键值为undefined：

const targetFlightId = 'EF_700001132';
// 先判断键是否存在，避免无效更新
if (formik.values.flightsById.hasOwnProperty(targetFlightId)) {
  formik.setFieldValue(`flightsById.${targetFlightId}`, undefined);
}

注意事项 #

如果你搭配了Yup做表单校验，需要确认flightsById对应的校验规则允许目标键缺失/值为undefined，否则可能触发异常校验报错。

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