如何通过 Id 从 Formik 中删除嵌套对象？答案

【问题标题】：How to remove nested object by Id from Formik?如何通过 Id 从 Formik 中删除嵌套对象？
【发布时间】：2021-10-18 16:19:16
【问题描述】：

我正在尝试从嵌套数组中删除整个航班项目。我试过 setFieldvalue。每当我找到一个特定的 ID 时，我想从 Formik 中删除整个项目。由于某种原因，互联网上的解决方案很少，即使在 SO 上也是如此。

console.log("Formik", formik.values.flightsById);
    for (let item in formik.values.flightsById){
      if(item === 'EF_700001132'){
        console.log("it's here: ", item)
        // React.useEffect(() => () => formik.setFieldValue(item, undefined), [])
        //formik.values.flightsById.remove

      }
    }
    console.log("Formik after del: ", formik.values.flightsById);

Console.log() 结果：

【问题讨论】：

标签： javascript reactjs formik

【解决方案1】：

一些反馈：

您将 flightsById 称为“嵌套数组”，但从您的屏幕截图来看，它是一个对象
使用setFieldValue() 更新flightsById，你有正确的想法，干得好?
在if 语句中放置一个useEffect 会触发错误，因为它会破坏rules of hooks
如果您想从flightsById 中完全删除他们的密钥EF_700001132，您需要克隆除该密钥之外的flightsById，然后将其传递给setFieldValue()。我使用了rest operator (...otherFlights) 来复制它而不使用密钥，但是在其他 SO 线程中还有很多其他方法详述。

以下是单击按钮时删除单个航班的示例：

<button
  type="button"
  onClick={() => {
    const { EF_700001132, ...otherFlights } = formik.values.flightsById;
    formik.setFieldValue("flightsById", otherFlights);
  }}
>
  Delete Flight EF_700001132
</button>

Live Demo

【讨论】：

非常感谢。我最终做了这个“formik.setFieldValue(flightId, undefined);”它删除了整个对象。