Не удается назначить debounce для свойства класса - PullRequest
Новая
       25

Не удается назначить debounce для свойства класса

0 голосов
/ 28 июня 2018

Я использую Babel с предустановкой Stage 2 и имею класс компонента React, подобный этому: 

class Test extends Component {
  someValue = 'Hello';

  componentDidMount() {
    this.debouncedHandleResize = debounce(this.handleResize, 1000);
    window.addEventListener('resize', this.debouncedHandleResize);
  }

  handleResize = () => {
    console.log(this.someValue);
  }
}

Это работает как ожидалось. Через 1000 мс после изменения размера окна запускается метод handleResize и консольные журналы «Hello».

Почему я не могу выполнить следующее? 

class Test extends Component {
  someValue = 'Hello';

  debouncedHandleResize = debounce(this.handleResize, 1000);

  componentDidMount() {
    window.addEventListener('resize', this.debouncedHandleResize);
  }

  handleResize = () => {
    console.log(this.someValue);
  }
}

В этом случае я получаю сообщение об ошибке: 

TypeError: Expected a function

Должно быть, я что-то упустил, но я думал, что оба были в основном способами присвоения значения свойства классу.

Ответы [ 3 ]

0 голосов
/ 29 июня 2018

Я обнаружил, где проблема. В моем втором примере (тот, который выдает ошибку), свойство класса установлено так: 

debouncedHandleResize = debounce(this.handleResize, 1000);

Ошибка почему-то жалуется, что ей не нравится this.handleResize и говорит, что это не функция. Хотя я на 100% не понимаю этого, простой тест ручной передачи функции вместо этого убрал ошибку: 

debouncedHandleResize = debounce(() => false, 1000);

С этим знанием мой новый и успешный способ написания класса: 

class Test extends Component {
  someValue = 'Hello';

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  handleResize = debounce(() => console.log(this.someValue), 1000)
}
0 голосов
/ 29 июня 2018

Поскольку вы обновили код: Проблема в том, что debouncedHandleResize и handleResize являются полями открытого класса. Поскольку назначение debouncedHandleResize на первом месте, вы пытаетесь сослаться на handleResize до того, как оно существует.

Поля открытого класса оцениваются по порядку, поэтому 

class Test {
  debouncedHandleResize = debounce(this.handleResize, 1000);

  handleResize = () => {
    console.log(this.someValue);
  }
}

эквивалентно 

class Test {
  constructor() {
    this.debouncedHandleResize = debounce(this.handleResize, 1000);

    this.handleResize = () => {
      console.log(this.someValue);
    }
}

Должно быть очевидно, почему это не может работать.

Решение

Изменить порядок назначений: 

class Test {
  handleResize = () => {
    console.log(this.someValue);
  }
  debouncedHandleResize = debounce(this.handleResize, 1000);
}
0 голосов
/ 28 июня 2018

Возможно, это должно быть: 

class Test extends React.Component {
    ...
}
...