Блог

Я использую хуки с useFormik в своей форме. Я использовал раньше для обработки таких случаев, но API изменился и не может использовать его с useFormik. У меня простой случай, когда моими значениями являются array [‘a’,’b’,’c’ ….], и у меня есть входные данные один за другим. Я хочу иметь возможность удалять заданные входные данные (и элемент из массива), а также добавлять новые…. Как этого добиться? Что я пробовал до сих пор:

Внутри моего компонента я просто сопоставляю значения из массива:

 {values.arrayValues.map((value, index) => (
    <div key={`value_no_${index}`}>
      <FormInput
        label={value}
        name={index}
        onChange={onChange}
        value={value}
      />
            <button
                onClick={() => removeCustomField(index)}
              >
                remove
            </button>
    </div>
  ))}

  const onChange = useCallback(event => {
    const { name, value } = event.target;
    const updatedValues = values.arrayValues;
    updatedValues[name] = value;
    setFieldValue('arrayValues', updatedValues);
  }, []);
  

значения.arrayValues — это мой массив значений formik, это то, что я пытался сделать при обмене. Чтобы удалить и добавить, я сделал что-то вроде этого:

   const removeField = useCallback((index: number) => {
    setFieldValue('arrayValues', values.customFieldsValues.filter((_, i) => i !== index));
  }, []);

  const addField = useCallback(() => {
    setFieldValue('arrayValues', [...values.arrayValues, '']);
  }, []);
  

К сожалению, здесь ничего не работает должным образом.
В компоненте с входными данными я просто использую map , а индекс — это имя ввода.