如何從 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>

現場演示