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

Question

我正在尝试从嵌套数组中删除整个航班项目。我试过 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() 结果：

Answer 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

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

How to remove nested object by Id from Formik?

javascript

reactjs

formik