javascript - 状态解构仅适用于箭头函数类方法？

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 类方法简写？我的猜测是这与必须绑定(bind)有关，但我不知道在这种情况下我需要绑定(bind)。

Answer 1

当您使用箭头函数时，这与 this 的作用域有关。this 的作用域是组件类，而不是函数本身。因此，如果您想使用普通函数，则需要在 React 组件构造函数中绑定(bind)该函数，例如 this.fetchSearchImagesBound = this.fetchSearchImages.bind(this)