React - setState 不更新数组答案

【问题标题】：React - setState not updating arrayReact - setState 不更新数组
【发布时间】：2018-11-11 21:54:04
【问题描述】：

这是我的代码：

class App extends Component {
  state = {
    query: '',
    results: []
  }
  handleSearch(e) {
    var query = e.target.elements.query.value;
   axios.get("http://www.omdbapi.com/?s=" + query + "&page=1&apikey=xxxx")
      .then(function (response) {
        console.log(response.data);
        this.setState({
          results: response.data.Search
        });
      }.bind(this))
      .catch(function (error) {
      });
    e.preventDefault();
  }

我正在尝试从 omdb 获取数据并将其显示在页面上。

问题是 setState 没有更新数组results？

有什么想法吗？谢谢

【问题讨论】：

如果您在 catch 函数中写入 console.error(error);，它会在控制台中记录任何内容吗？您是否在开发者工具的“网络”选项卡中收到错误消息？
@Tholle 是的；输出是“TypeError：无法读取未定义的属性'setState'”
@Axnyff 但我只是用 .bind(this) 绑定它
@Chino 好的。那么你很可能需要在构造函数中将handleSearch绑定到this，或者将handleSearch变成类属性箭头函数：handleSearch = (e) => { ... };
非常感谢你们，如果你愿意，可以把它写成答案。

标签： javascript reactjs state

【解决方案1】：

您绑定 axios 请求正确完成时调用的函数，但您还必须绑定 handleSearch 方法本身。您可以在构造函数中执行此操作，或者改用类属性箭头函数：

class App extends Component {
  state = {
    query: '',
    results: []
  }

  handleSearch = (e) => {
    // ...
  }
}

【讨论】：