Почему эта функция стрелки не срабатывает, и как правильно ее вызвать?

Question

Почему someFunction не запускается в следующем фрагменте? Я получаю сообщение об ошибке: someFunction is not a function.

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.setInterval = this.setInterval.bind(this);
    this.someFunction = this.someFunction.bind(this);
  }

  setInterval = () => {
    console.log('Set Interval');
    setTimeout(function () {
        this.someFunction()
    }, 2000);
  }

  someFunction = () => {
    console.log('Some function');
  }

  componentDidMount() {
    this.timer = this.setInterval();
  }
}

Answer 1

Потому что то, как вы ссылались на «это», было неверным. Возможно, вы захотите go с этими параметрами:

Опция 1: явное связывание с использованием bind ()

setInterval = () => {
    setTimeout(this.someFunction.bind(this), 2000);
}

Опция 2: использование функции жирной стрелки

setInterval = () => {
    setTimeout(() => {
        this.someFunction()
    }, 2000);
  }

Answer 2

Технически, это проблема с ограничениями. someFunction не существует для того this того, что у вас есть в функции, переданной setTimeout.

Обходной путь, который может сработать:

setInterval = () => {
    const self = this;

    setTimeout(function () {
        self.someFunction()
    }, 2000);
}

Или используя () => { } как следующее:

setInterval = () => {
    setTimeout(() => this.someFunction(), 2000);
}

Надеюсь, это поможет!

Answer 3

Попробуйте использовать функцию стрелки внутри setInterval.

setInterval = () => {
    console.log('Set Interval');
    setTimeout(function () {
        this.someFunction()
    }, 2000);
  }

может быть

setInterval = () => {
    console.log('Set Interval');
    setTimeout(() => {
        this.someFunction()
    }, 2000);
  }

Первый фрагмент не работает, поскольку this не относится к правильному this. В StackOverflow есть много вопросов и ответов по этому поводу, вы можете найти их для более подробного объяснения.

Answer 4

SomeFunction находится вне области видимости. Вам не нужно связывать 'this', если вы используете функции стрелок.

Это самая простая версия вашего компонента. Попробуйте это

class MyComponent extends React.Component {

  setInterval = () => {
    console.log('Set Interval');
    setTimeout(this.someFunction, 2000);
  }

  someFunction = () => {
    console.log('Some function');
  }

  componentDidMount() {
    this.timer = this.setInterval();
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }
}

Не забудьте очистить объект таймера внутри componentWillUnmount.