Question

我觉得我在这个React函数中经常重复自己。我需要检查状态中的大多数字段是否为空，但是有些字段我不想检查。所以我不确定该怎么做。

这里是：

onSearchClick = () => {
  const {insightName, insightDescription, createdBy, category, role, insightSource, assignTo, endDate, startDate} = this.state;
  if(
    insightName === "" &&
    insightDescription === "" &&
    createdBy === "" &&
    category === "" &&
    role === "" &&
    insightSource === "" &&
    assignTo === "" &&
    (endDate === "" || endDate === null) &&
    (startDate === "" || startDate === null) 
  )
  {
    window.scrollTo(500, 0);
    this.setState({
      isFormValid: false,
    })
  } else if (
    insightName === "" &&
    insightDescription === "" &&
    createdBy === "" &&
    category === "" &&
    role === "" &&
    insightSource === "" &&
    assignTo === "" &&
    (endDate === "" || endDate === null)
  ) {
    window.scrollTo(500, 0);
    this.setState({
      showEndDateMsg: true
    })
  } else if (
    insightName === "" &&
    insightDescription === "" &&
    createdBy === "" &&
    category === "" &&
    role === "" &&
    insightSource === "" &&
    assignTo === "" &&
    (startDate === "" || startDate === null)
  ) {
    window.scrollTo(500, 0);
    this.setState({
      showStartDateMsg: true
    })
  } else {

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

我想遵循DRY原则，但不确定该怎么做！任何建议将不胜感激。谢谢。

Answer 1

您可以检查变量的隐含值是否等于空字符串，而不用一个一个地检查它们

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

并在值为空时将scrollTo放在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
    });
  }
};

Answer 2

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

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

Answer 3

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

有没有更简单的方法来编写此React函数？

3 个答案: