仅通过箭头函数类方法进行状态分解？

Question

虽然设置了状态，但是在此组件类方法中未定义状态，我得到一个错误。

// searchState undefined error
fetchSearchImages() {
    const { searchStart, count, term, searchImages } = this.state;
    this.setState({
      searchStart: searchStart + count
    });
    axios
      .get(`/api/photos/search?term=${term}&count=${count}&start=${searchStart}`)
      .then(res =>
        this.setState({
          searchImages: searchImages.concat(res.data.results)
        })
      );
  }

但是，将其更改为箭头函数（类字段声明语法）解决了该错误，并且我的代码按预期工作。

// No more error
fetchSearchImages = () => {
    const { searchStart, count, term, searchImages } = this.state;
    this.setState({
      searchStart: searchStart + count
    });
    axios
      .get(`/api/photos/search?term=${term}&count=${count}&start=${searchStart}`)
      .then(res =>
        this.setState({
          searchImages: searchImages.concat(res.data.results)
        })
      );
  }

为什么我不能为此使用ES6类方法的简写？我的猜测是必须绑定，但我不知道在这种情况下需要绑定。

Answer 1

与使用箭头功能时this的范围有关this的作用域是被调用方，而不是调用方。因此，如果您想使用普通函数，则需要将其绑定到您的React Components构造函数中，例如this.fetchSearchImagesBound = this.fetchSearchImages.bind(this)