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

因为您引用“ this”的方式不正确。您可能想使用以下选项：

选项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”。

这是组件的最简单版本。试试这个

# Recommended android's NDK version by p4a is: 19b
# Android NDK is missing, downloading
# Downloading https://dl.google.com/android/repository/android-ndk-r19b-linux-x86.zip
Traceback (most recent call last):
  File "/usr/local/bin/buildozer", line 11, in <module>
    sys.exit(main())
  File "/usr/local/lib/python3.5/dist-packages/buildozer/scripts/client.py", line 13, in main
    Buildozer().run_command(sys.argv[1:])
  File "/usr/local/lib/python3.5/dist-packages/buildozer/__init__.py", line 1071, in run_command
    self.target.run_commands(args)
  File "/usr/local/lib/python3.5/dist-packages/buildozer/target.py", line 92, in run_commands
    func(args)
  File "/usr/local/lib/python3.5/dist-packages/buildozer/target.py", line 102, in cmd_debug
    self.buildozer.prepare_for_build()
  File "/usr/local/lib/python3.5/dist-packages/buildozer/__init__.py", line 178, in prepare_for_build
    self.target.install_platform()
  File "/usr/local/lib/python3.5/dist-packages/buildozer/targets/android.py", line 666, in install_platform
    self._install_android_ndk()
  File "/usr/local/lib/python3.5/dist-packages/buildozer/targets/android.py", line 459, in _install_android_ndk
    cwd=self.buildozer.global_platform_dir)
  File "/usr/local/lib/python3.5/dist-packages/buildozer/__init__.py", line 699, in download
    urlretrieve(url, filename, report_hook)
  File "/usr/lib/python3.5/urllib/request.py", line 1760, in retrieve
    block = fp.read(bs)
  File "/usr/lib/python3.5/tempfile.py", line 622, in func_wrapper
    return func(*args, **kwargs)
ValueError: read of closed file

别忘了清除componentWillUnmount内部的计时器对象。

为什么此箭头函数无法触发，以及如何正确调用它？

4 个答案: