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

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 ，您的想法是正确的， flightsById好😉
• 在if语句中放置 useEffect 会触发错误，因为它违反了钩子规则
• 如果您想从flightsById完全删除它们的键EF_700001132 ，则需要克隆除该键之外的flightsById ，然后将其传递给setFieldValue() 。 我使用rest 运算符（ ...otherFlights ）在没有密钥的情况下复制它，但在其他 SO 线程中详细介绍了许多其他方法。

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

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

现场演示