仅发送在formik onSubmit中已更改的值 [英] Only send values that have changed in formik onSubmit

问题描述

我有一张小数据表，该数据表是在页面加载时由api调用预先填充的.表中的每一行都有一个设施名称和一个来自api调用的Enabled值.如果Enabled == true，则该复选框显示为选中状态.

I have a small table of data that is pre-filled by an api call on page load. Each row in the table has a facility name and an Enabled value which comes from the api call. If Enabled == true the checkbox is shown as checked.

我有几个复选框，由于无法完全更改而处于灰色状态，因此该字段上有一个readOnly属性.

I have a couple checkboxes that are grayed out because of a condition in which it cannot be changed at all so there's a readOnly attribute on the field.

在我的问题上，为简洁起见，我精简了表中显示的设施清单，但实际上可能有X处设施.在我的onSubmit函数中，我只想发送设施名称和enabled值(如果已选择/取消选择它们)，而不是每次按提交时都发送整个列表.

Onto my question, for brevity I condensed the list of facilities shown in the table, but in reality there could be X amount of facilities. In my onSubmit function I only want to send the facility name and enabled value if they have been selected/deselected instead of sending the entire list every time submit is pressed.

理想情况下，我希望发送的数据形状如下所示:

Ideally I want the shape of the data sent to look like so:

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

现在，我已经能够仅将facilityName和enabled值隔离开来，但是我无法弄清楚仅包含已在表格中更改的值.就像我在上面说过的那样，并不是每次按提交时仅发送已更改的设施名称和启用的键/值就应该发送.

Now, I have been able to isolate JUST the facilityName and enabled value but I cannot figure out to only include the values that have been changed in the form. Like I said above, not every single facility name and enabled key/value should be sent every time submit is pressed just the ones that have been changed.

这是我当前在onSubmit函数中拥有的(可以在下面的沙箱中看到)

This is what I currently have(and can be seen in the sandbox below) in my onSubmit function

         <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
                };
              });
              .....

我有一个此处的代码框

推荐答案

从

From the second param of your onSubmit callback, you can access props, so you could diff values against props.initialValues or however you have called the prop you use to initialize the form.

实际上，这是来自Jared Palmer的建议:

您可以比较initialValues和handleSubmit/onSubmit中的值.

使用 Array.prototype.filter() 看起来像这样:

Using Array.prototype.filter() it would look something like this:

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) { ... }

}

这篇关于仅发送在formik onSubmit中已更改的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！