Question

我正在重构React文件中的某些代码，我有两个函数几乎可以完成相同的工作...但是一个函数返回一个函数，另一个函数执行一些代码。

我现在对ES6和箭头功能还不太满意。而且我不知道该如何重构。

 switchEventSelectedSchedule = cb => option => {
    this.setState(
      // Mutate the state
      () => ({
        eventSelected: option.id,
        isLoading: true
      }),
      // Callback to fire when the state has been mutated with the new event id
      async () => {
        await this.longPollingAllMatches();
        this.setState(() => ({
          isLoading: false
        }));
        const { currentRoundId, rounds } = this.state;
        cb(rounds, currentRoundId);
      }
    );
  };

  switchEventSelectedRoundTable = option => {
    this.setState(
      // Mutate the state
      () => ({
        eventSelected: option.id,
        isLoading: true
      }),
      // Callback to fire when the state has been mutated with the new event id
      async () => {
        await this.longPollingAllMatches();
        this.setState(() => ({
          isLoading: false
        }));
      }
    );
  };

在一种情况下（想象一下if（schedule）），我需要返回cb函数，否则我只需要执行其余代码即可。

对不起，似乎很愚蠢，但我想我误解了ES6语法中的某些内容以实现此目标。...

很多！

Answer 1

只需让switchEventSelectedRoundTable使用不执行任何操作的回调来调用另一个函数。由于switchEventSelectedSchedule是curried，因此很简单：

switchEventSelectedRoundTable = switchEventSelectedSchedule((rounds, currentRoundId) => {});

如何重构那些非常相似的箭头功能？

1 个答案: