Javascript 有没有更简单的方法来编写这个React函数？

我觉得我在这个函数中重复了很多次。我需要检查我所在州的大多数字段是否为空，但有几个字段我不想检查。所以我不知道该怎么做

这是：

onSearchClick=（）=>{
const{insightName，insightDescription，createdBy，category，role，insightSource，assignTo，endDate，startDate}=this.state；
如果(
insightName==“”&&
insightDescription==“”&&
createdBy===“”&&
类别==“”&&
角色===“”&&
insightSource==“”&&
分配给===“”&&
（结束日期===“”| |结束日期===null）&&
（开始日期===“”| |开始日期===null）
)
{
滚动到（500，0）；
这是我的国家({
isFormValid:false，
})
}否则如果(
insightName==“”&&
insightDescription==“”&&
createdBy===“”&&
类别==“”&&
角色===“”&&
insightSource==“”&&
分配给===“”&&
（结束日期===“”| |结束日期===null）
) {
滚动到（500，0）；
这是我的国家({
showEndDateMsg:true
})
}否则如果(
insightName==“”&&
insightDescription==“”&&
createdBy===“”&&
类别==“”&&
角色===“”&&
insightSource==“”&&
分配给===“”&&
（开始日期===“”| |开始日期===null）
) {
滚动到（500，0）；
这是我的国家({
showStartDateMsg:正确
})
}否则{
这是我的国家({
可展示：正确
})
}
}

---

我想遵循干燥的原则，但不知道该怎么做！任何建议都将不胜感激。谢谢。

设置一个变量以包含您不断检查的所有内容：

const isMostlyEmpty = insightName === "" &&
                      insightDescription === "" &&
                      createdBy === "" &&
                      category === "" &&
                      role === "" &&
                      insightSource === "" &&
                      assignTo === "";

然后，您可以在每个语句中重复使用：

if(isMostlyEmpty &&
   (endDate === "" || endDate === null) &&
   (startDate === "" || startDate === null)) {
        window.scrollTo(500, 0);
        this.setState({
          isFormValid: false,
        });
} else if (isMostlyEmpty &&
           (endDate === '' || endDate === null)) {
    window.scrollTo(500, 0);
    this.setState({
      showEndDateMsg: true
    });
} else if (isMostlyEmpty &&
           (startDate === '' || endDate === null)) {
    window.scrollTo(500, 0);
    this.setState({
      showStartDateMsg: true
    });
} else {
    this.setState({
        showTable: true
    });
}

---

您可以检查变量的具体值是否等于空字符串，而不是逐个检查

const emptyValues = insightName + insightDescription + createdBy + category + role + insightSource + assignTo === "";

当值为空时，将

滚动到
中的
if
块中

onSearchClick = () => {
  const {
    insightName,
    insightDescription,
    createdBy,
    category,
    role,
    insightSource,
    assignTo,
    endDate,
    startDate
  } = this.state;

  const emptyValues = insightName + insightDescription + createdBy + category + role + insightSource + assignTo === "";

  const noEndDate = endDate === "" || endDate === null;  

  const noStartDate = startDate === "" || startDate === null;

  if (emptyValues) {
    window.scrollTo(500, 0);
    if (noEndDate && noStartDate) {
      this.setState({
        isFormValid: false
      });
    } else if (noEndDate) {
      this.setState({
        showEndDateMsg: true
      });
    } else if (noStartDate) {
      this.setState({
        showStartDateMsg: true
      });
    }
  } else {
    this.setState({
      showTable: true
    });
  }
};

创建一个函数，该函数将为最重复的条件返回布尔值，将其分配给一个变量并用于其他条件。您可以使用JavaScript验证库。因此，将所有通用的内容放在一个变量中，并将该变量与不通用的内容一起使用。正如前面提到的每个变量都会生成一个用于比较的函数，您可以将所有字段放在一个数组中以减少比较运算符
=
并使用一些迭代器（例如映射或过滤器）进行比较。您应该在输入发生更改时验证输入，并跟踪其有效性。然后，在调用onSearchClick时检查该选项
invalidForm = (reason) => {
  window.scrollTo(500, 0);

  switch(reason) {
    case 'noStartDate': 
      return this.setState({ showStartDateMsg: true });
    case 'noEndDate': 
      return this.setState({ showEndDateMsg: true });
    default:
      return this.setState({ isFormValid: false });
  }
}

onSearchClick = () => {
  const {
    insightName,
    insightDescription,
    createdBy,
    category,
    role,
    insightSource,
    assignTo,
    endDate,
    startDate
  } = this.state;

  const hasEmptyFields = [
    insightName,
    insightDescription,
    createdBy,
    category,
    role,
    insightSource,
    assignTo,
    endDate,
    startDate
  ].filter((field) => field === '');

  if(hasEmptyFields) {
    return this.invalidForm();
  }

  if(!startDate) {
    return this.invalidForm('noStartDate');
  }

  if(!endDate) {
    return this.invalidForm('noEndDate');
  }

  return this.setState({ showTable: true });
};