时间戳

首页 > 解决方案 > TypeScript - 仅在有值时在 POST 上发送可选字段

javascript - TypeScript - 仅在有值时在 POST 上发送可选字段

问题描述

我在我的 React 应用程序中使用 Formik。我有一个包含 3 个字段的简单表单。我正在使用该表格进行 2 次操作。添加/编辑资源。

我的问题是一个字段是可选的。这意味着我永远不应该发送它，如果它的值为空。目前，我发送了一个错误的空字符串。

我正在使用 TS-React-Formik，这是我的handleSubmit方法代码：

interface IValues extends FormikValues {
  name: string;
  owner?: string;
  groups: string[];
}

interface CreateAndEditProps {
  doSubmit(service: object, values: object): AxiosResponse<string>;
  onSave(values: IValues): void;
}

handleSubmit = (values: FormikValues, formikActions:FormikActions<IValues>) => {
    const { doSubmit, onSave, isEditMode } = this.props;
    const { setSubmitting } = formikActions;
    const payload: IValues = {
      name: values.name,
      groups: values.groups,
      owner: values.owner
    };
    const submitAction = isEditMode ? update : create;
    return doSubmit(submitAction, payload)
      .then(() => {
        setSubmitting(false);
        onSave(payload);
      })
      .catch(() => {
        setSubmitting(false);
      });
  };

我认为一个简单的 if 语句会起作用，虽然它起作用了，但我一点也不喜欢它。让我举个例子说明原因。如果我以类似的形式添加另外 2 个可选字段，就像我即将做的那样，我不想做几个 if 语句来实现这一点。

如果你能想到一种更优雅、更干的方式来做这件事，那就太棒了。感谢您的时间。

标签： javascriptreactjstypescriptformikhttp-method

解决方案

查看下面的 removeEmptyKeys()。它接受一个对象并删除具有空字符串的键。它会改变原始对象，如果您期望差异行为，请相应地更改它。

在定义有效负载后的代码中，我只需调用此方法removeEmptyKeys(payload)

它还将解决您的 if else 问题。

removeEmptyKeys = (item)=>{
Object.keys(item).map((key)=>{
if(payload[key]===""){
delete payload[key]}
})}

var payload = {
one : "one",
two : "",
three : "three"
}
removeEmptyKeys(payload)

如果您觉得这很有用，请将其标记为已解决。

对于您的代码：

const removeEmptyKeys = (values: IValues): any => {
Object.keys(values).map((key) => { 
if (payload && payload[key] === "")
{ delete payload[key] } }) 
return values; 
}

推荐阅读