Определение того, какой элемент был удален (создан и изменен) в Formik FieldArray

Question

Интересно, есть ли у Formik собственное решение для идентификации добавления и удаления (и обновления) FieldArray в форме?

У меня есть код в песочнице здесь https://codesandbox.io/s/jn7x2m75o9 (на основев исходном примере массива Formik @ https://github.com/jaredpalmer/formik/blob/master/examples/Arrays.js)

, но также и соответствующая часть здесь:

с определением начального значения state из 3 друга ,как я могу узнать в моем onSubmithandler, который был изменен, удален, обновлен .

import React from "react";
import { Formik, Field, Form, ErrorMessage, FieldArray } from "formik";

const initialValues = {
  friends: [
    {
      name: "Friend_A",
      email: "email_A@somewhere.com"
    },
    {
      name: "Friend_B",
      email: "email_B@somewhere.com"
    },
    {
      name: "Friend_C",
      email: "email_C@somewhere.com"
    }
  ]
};

const mySubmit = values => console.log();

const SignIn = () => (
  <div>
    <h1>Invite friends</h1>
    <Formik
      initialValues={initialValues}
      onSubmit={values => {
        var itemRemoved = values.GetItemRemoveFromArray; // This is what I'm looking for
        console.log(itemRemoved);
        // Would print Friend_A

        var itemAdded = values.GetItemAddedFromArray; // This is what I'm looking for
        console.log(itemAdded);
        // Would print New_Friend

        var itemUpdated = values.GetItemUpdatedInArray; // This is what I'm looking for
        console.log(itemUpdated);
        // Would print Friend_C

        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
        }, 500);
      }}
      render={({ values }) => (
        <Form>
          <FieldArray
            name="friends"
            render={({ insert, remove, push }) => (
              <div>
                {values.friends.length > 0 &&
                  values.friends.map((friend, index) => (
                    <div className="row" key={index}>
                      <div className="col">
                        <label htmlFor={`friends.${index}.name`}>Name</label>
                        <Field
                          name={`friends.${index}.name`}
                          placeholder="Jane Doe"
                          type="text"
                        />
                        <ErrorMessage
                          name={`friends.${index}.name`}
                          component="div"
                          className="field-error"
                        />
                      </div>
                      <div className="col">
                        <label htmlFor={`friends.${index}.email`}>Email</label>
                        <Field
                          name={`friends.${index}.email`}
                          placeholder="jane@acme.com"
                          type="email"
                        />
                        <ErrorMessage
                          name={`friends.${index}.name`}
                          component="div"
                          className="field-error"
                        />
                      </div>
                      <div className="col">
                        <button
                          type="button"
                          className="secondary"
                          onClick={() => remove(index)}
                        >
                          X
                        </button>
                      </div>
                    </div>
                  ))}
                <button
                  type="button"
                  className="secondary"
                  onClick={() => push({ name: "", email: "" })}
                >
                  Add Friend
                </button>
              </div>
            )}
          />
          <button type="submit">Invite</button>
        </Form>
      )}
    />
  </div>
);

export default SignIn;

Так что, если с указанным выше пользователем, где:

1. Нажмите X ниже Friend_A
2. Измените адрес электронной почты Friend_C на email_C@nothere.com
3. Нажмите «Добавить друга»
4. Введите значение Имя: New_Friend_X и электронная почта: XX@YY.com
5. Нажмите «Добавить друга»
6. Введите значение Имя:New_Friend_Z и электронная почта: Friend_Z@coolplace.com
7. Нажмите кнопку «X» под вновь введенным «New_Friend_X»
8. Нажмите «Пригласить»

в mySubmit I 'я ищу способ легко получить:

1. Friend_A был удален
2. Friend_C был изменен
3. Добавлен New_Friend_Z (не было в первоначальных первоначальных значениях для formik)

(Меня не волнует New_Friend_X. Не нужно знать, что он был добавлен / удален)

Суть в том, чтобы свести к минимуму остаточный вызов серверной части для создания / обновления сущности/ link, а также я действительно не хочу писать свое собственное "вторичное состояние" в обработчике onClick кнопки удаления перед вызовом the remove(index) обработчик, предоставляемый Formik для отслеживания того, что необходимо удалить из БД.