Question

此功能只是我需要实现的逻辑的一小部分，代码变得越来越长，我正在寻找创造性的方式以短格式编写此任务。

if (type === '30d') {
  self.setState({
      startDate: last30d,
      endDate: now
    },
    () => {
      this.fetchPeriod('income');
      this.fetchPeriod('expense');
      this.fetchSettings();
    }
  );
} else if (type === '15d') {
  self.setState({
      startDate: last15d,
      endDate: now
    },
    () => {
      this.fetchPeriod('income');
      this.fetchPeriod('expense');
      this.fetchSettings();
    }
  );
} else if (type === '7d') {
  self.setState({
      startDate: last7d,
      endDate: now
    },
    () => {
      this.fetchPeriod('income');
      this.fetchPeriod('expense');
      this.fetchSettings();
    }
  );
}

Answer 1

一种选择是制作一个将每个type与startDate相关联的对象，然后将其传递给setState：

const startDatesByType = {
  '30d': last30d,
  '15d': last15d,
  '7d': last7d,
};
const startDate = startDatesByType[type];
if (startDate) {
  self.setState({ startDate, endDate: now },
    () => {
      this.fetchPeriod('income');
      this.fetchPeriod('expense');
      this.fetchSettings();
    }
  );
}

如果可能，您可以考虑更改last30d和相关变量，以便它们在startDatesByType对象中仅，而不是多个独立变量。

Answer 2

获取开始日期并设置一次状态，而不是在多个条件下进行设置。

const startDate = type === '30d' ? last30d : ( type === '15d' ? last15d : last7d);

if ('30d 15d 7d'.includes(type)) {

  self.setState({ startDate: startDate, endDate: now },
    () => {
      this.fetchPeriod('income');
      this.fetchPeriod('expense');
      this.fetchSettings();
    }
  );
}

Answer 3

创建一个type => startDate的映射，并将其用于setState调用。

Answer 4

您的“瓶颈”为startDate，请考虑制作通用的getLastNDates：

self.setState({ startDate: getLastNDates(n) , endDate: getLastNDates(0) },
      () => {
        this.fetchPeriod('income');
        this.fetchPeriod('expense');
        this.fetchSettings();
      }
    );

如何使用ES6缩短此功能？

4 个答案: