状态解构只能在箭头函数类中工作吗？

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)

Answer 2

您正在setStateing状态变量，您需要绑定该方法（this.fetchSearchImages.bind（this））或使用箭头功能

Answer 3

在您的第一个代码中：

fetchSearchImages = () => {
const { searchStart, count, term, searchImages } = this.state;
this.setState({
  searchStart: searchStart + count
});

此处“ this”是指函数fetchSearchImages的this，而不是组件的this。

执行此操作时：

fetchSearchImages = () => {
const { searchStart, count, term, searchImages } = this.state;
this.setState({
  searchStart: searchStart + count
});

此处“ this”是指组件的“ this”，因为arrow函数没有它自己的“ this”。 这就是为什么您必须使用箭头功能访问“此”的原因