仅发送在 formik onSubmit 中已更改的值

Question

我有一个小数据表，由页面加载时的 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
                };
              });
              .....

我这里有一个代码箱

Answer 1

从onSubmit回调的第二个参数中，您可以访问props，因此您可以与 diffvalues进行比较，props.initialValues或者您已经调用了用于初始化表单的 prop。

实际上，这是Jared Palmer的建议：

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

}