使用 Formik 响应动态输入

Question

I am trying to dynamically remove an input field after a button is pressed and also remove the key with its value from Formik. I am using the useFormik hook for implementation. The problem is that when I press the button to remove the input field, it is removed but the key and value stay in useFormik. When I press the button again, another input field is removed and the previous key and value is removed from useFormik. Removing values from useFormik is one step behind. How can I change it so it removes the key and value at the same time as the input field?

Here are initial values for Formik.

const formik = useFormik({
    initialValues: {
      Produkt1:
        "",
      Produkt2:
        "",
    },
    validationSchema: frontProductUrls(),
    enableReinitialize: true,
    onSubmit: (values) => {
      console.log(values);
    },
    setFieldValue: () => {
      delete fields.length - 1;
    },
  });

This array i use to dynamicly add remove and render input fields.

const [fields, setFields] = useState([
    { name: "Produkt1", label: "Produkt 1" },
    { name: "Produkt2", label: "Produkt 2" },
  ]);

Here is function to remove last input filed in array and also remove key and value from useFormik.

const removeField = (e) => {
    formik.setFieldValue(`Produkt${fields.length + 1}`, undefined, false);

    let updatedFields = [...fields];
    updatedFields.splice(fields.length - 1, 1);
    setFields(() => updatedFields);
  };

This function is used to add new input field. This work fine it add new input and also it add new key in useFormik.

const addField = () => {
    if (fields.length > 3) return;

    const newProduct = `Produkt${fields.length + 1}`;
    formik.setFieldValue(newProduct, "");
    setFields([
      ...fields,
      {
        name: newProduct,
        label: newProduct,
      },
    ]);
  };

Here is code where are fields rendered.

{fields.map((field, index) => {
          return (
            <div key={index} className="mb-4">
              <label
                htmlFor={field.name}
                className="block text-gray-700 font-medium mb-2"
              >
                {field.label}
              </label>
              <input
                id={field.name}
                name={field.name}
                type="text"
                onChange={formik.handleChange}
                value={formik.values[field.name]}
                className="border border-gray-400 p-2 rounded-lg w-full"
              />
            </div>
          );
        })}

    ```

Answer 1

I had to add this code

formik.setFieldValue(`Produkt${fields.length}`, "");
    setFields(fields.filter((_, i) => i !== fields.length - 1));

 useEffect(() => {
    formik.
    formik.setValues({ fields });
  }, [fields]);