Javascript 为什么这个箭头函数不启动，如何正确调用它？

为什么

someFunction

在下面的代码段中没有被激发？我得到一个错误：

someFunction不是函数

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

---

从技术上讲，这是一个范围问题

someFunction

在该

上不存在此

传递给

setTimeout

的函数中的内容

可行的解决方法：

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

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

或者像下面这样使用

（）=>{}

：

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

---

我希望这有帮助

从技术上讲，这是一个范围问题

someFunction

在该

上不存在此

传递给

setTimeout

的函数中的内容

可行的解决方法：

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

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

或者像下面这样使用

（）=>{}

：

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

---

我希望这有帮助

尝试在

setInterval

中使用箭头函数

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

可能是

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

---

第一个代码段失败，因为

this

没有引用正确的

this

。关于StackOverflow，有很多问题和答案，您可以搜索它们以获得更详细的解释。

尝试在

setInterval

中使用箭头函数

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

可能是

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

---

第一个代码段失败，因为

this

没有引用正确的

this

。StackOverflow上有很多关于此的问题和答案，您可以搜索它们以获得更详细的解释。

因为您所指的“this”是不正确的。您可能希望使用以下选项：

选项1：使用bind（）显式绑定

选项2：使用胖箭头功能

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

---

因为你提到“这”的方式是不正确的。您可能希望使用以下选项：

选项1：使用bind（）显式绑定

选项2：使用胖箭头功能

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

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中的计时器对象

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中的计时器对象

---

这回答了你的问题吗？这回答了你的问题吗？