Отправлять только те значения, которые были изменены в formik onSubmit - PullRequest
Новая
       3

Отправлять только те значения, которые были изменены в formik onSubmit

0 голосов
/ 07 января 2020

У меня есть небольшая таблица данных, которая предварительно заполняется вызовом API при загрузке страницы. У каждой строки в таблице есть имя объекта и значение Enabled, полученное из вызова API. Если Enabled == true, флажок отображается как отмеченный.

У меня есть пара флажков, которые выделены серым цветом из-за условия, при котором его вообще нельзя изменить, поэтому в поле есть атрибут readOnly.

На мой вопрос, для краткости я сжал список объектов показан в таблице, но на самом деле количество объектов может составлять X. В моей функции onSubmit я хочу отправлять имя объекта и значение enabled только в том случае, если они были выбраны / отменены, вместо отправки всего списка при каждом нажатии кнопки отправки.

В идеале мне нужна форма отправленные данные выглядят так: 

{
    facilityName: "Backup Restore",
    enabled: true
}

Теперь я смог выделить просто значение facilityName и enabled, но я не могу понять, включать ли только те значения, которые были изменены в форма. Как я уже говорил выше, не каждое имя объекта и включенная клавиша / значение должны отправляться при каждом нажатии кнопки «Отправить», только те, которые были изменены.

Это то, что у меня есть в настоящее время (и это можно увидеть на песочница ниже) в моей функции onSubmit 

         <Formik
          enableReinitialize
          initialValues={{
            facilities: loggingFacilities
          }}
          onSubmit={async (values, { setSubmitting }) => {

            alert(JSON.stringify(values, null, 2));
            try {

              setLoggingFacilities(values.facilities);
              const valuesToSend = values.facilities.map(facility => {
                return {
                  key: facility.facilityName,
                  value: facility.enabled
                };
              });
              .....

У меня есть коды и коробка здесь

1 Ответ

1 голос
/ 07 января 2020

Со второго параметра вашего обратного вызова onSubmit вы можете получить доступ к props, чтобы вы могли дифференцировать values против props.initialValues или, тем не менее, вы вызвали реквизит, который вы используете для инициализации form.

На самом деле, это предложение от Джареда Палмера :

Вы можете сравнить initialValues и значения в handleSubmit / onSubmit.

Использование Array.prototype.filter() будет выглядеть примерно так: 

onSubmit={async (values, { props, setSubmitting }) => {

  // Let's assume this has the same format as `values.facilities`:
  const { initialValues } = props;

  try {
    setLoggingFacilities(values.facilities);

    const valuesToSend = values.facilities.filter((facility, i) => {
      // Let's send only those that have just been disabled or enabled:
      return facility.enabled !== initialValues[i].enabled;
    }).map((facility) => ({
      key: facility.facilityName,
      value: facility.enabled
    }));

    // ...

  } catch(err) { ... }

}
...