Javascript TypeError:无法读取属性'；设置状态'；axios在react JS中获取数据的响应中未定义的

我正在尝试使用api结果放置autosuggest

import React, { Component } from "react";
import Autosuggest from "react-autosuggest";
import axios from "axios";

// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
const getSuggestionValue = suggestion => suggestion.city;

// Use your imagination to render suggestions.
const renderSuggestion = suggestion => <div>{suggestion.city}</div>;

class Autocomplete extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      suggestions: []
    };
    this.getData = this.getData.bind(this);
  }

  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
  };

  getData(value) {
    var itemslist = {};
    axios
      .get(
        "https://abcdgf/api/cities?page=1&perPage=1000&search=" +
          value
      )
      .then(function(response) {
        console.log(response.status);
        if (response.status === 200) {
          itemslist = response.data.data;
          console.log(itemslist);
          this.setState({
            suggestions: itemslist.filter(
              lang => lang.city.toLowerCase().slice(0, value.length) === value
            )
          });
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  // Autosuggest will call this function every time you need to update suggestions.
  // You already implemented this logic above, so just use it.
  onSuggestionsFetchRequested = ({ value }) => {
    if (value.length > 2) {
      this.getData(value.trim().toLowerCase());
    }
  };

  // Autosuggest will call this function every time you need to clear suggestions.
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

  render() {
    const { value, suggestions } = this.state;

    // Autosuggest will pass through all these props to the input.
    const inputProps = {
      placeholder: "Type a programming language",
      value,
      onChange: this.onChange
    };

    // Finally, render it!
    return (
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={getSuggestionValue}
        renderSuggestion={renderSuggestion}
        inputProps={inputProps}
      />
    );
  }
}
export default Autocomplete;

import React，{Component}来自“React”；
从“react Autosuggest”导入Autosuggest；
从“axios”导入axios；
//单击“建议”时，Autosuggest需要填充输入
//基于点击的建议。教Autosuggest如何计算
//每个给定建议的输入值。
const getSuggestionValue=suggestion=>suggestion.city；
//运用你的想象力提出建议。
const renderSuggestion=suggestion=>{suggestion.city}；
类Autocomplete扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
建议：[]
};
this.getData=this.getData.bind（this）；
}
onChange=（事件，{newValue}）=>{
这是我的国家({
值：newValue
});
};
getData（值）{
var itemslist={}；
axios
.得到(
"https://abcdgf/api/cities?page=1&perPage=1000&search=" +
价值
)
.然后（功能（响应）{
console.log（响应状态）；
如果（response.status==200）{
itemslist=response.data.data；
console.log（itemslist）；
这是我的国家({
建议：itemslist.filter(
lang=>lang.city.toLowerCase（）.slice（0，value.length）==value
)
});
}
})
.catch（函数（错误）{
console.log（错误）；
});
}
//每次需要更新建议时，Autosuggest将调用此函数。
//您已经实现了上面的逻辑，所以请使用它。
OnSuggestionFetchRequested=（{value}）=>{
如果（value.length>2）{
this.getData（value.trim（）.toLowerCase（））；
}
};
//每次需要清除建议时，Autosuggest将调用此函数。
OnSuggestionClearRequested=（）=>{
这是我的国家({
建议：[]
});
};
render（）{
const{value，suggestions}=this.state；
//Autosuggest将通过所有这些道具传递到输入。
常量输入属性={
占位符：“键入编程语言”，
价值
onChange:this.onChange
};
//最后，渲染它！
返回(
);
}
}
导出默认自动完成；

---

在getData函数的第49行，它给出了一个错误，表示无法读取undefined的属性“setState”。实际上getData是在构造函数中声明的。如果我移除这个axios，那么它工作正常。请让我知道这里面有什么错误。提前感谢。

在中，然后使用箭头功能或绑定此功能

then((response) => {
    console.log(response.status);
    if (response.status === 200) {
      itemslist = response.data.data;
      console.log(itemslist);
      this.setState({
        suggestions: itemslist.filter(
          lang => lang.city.toLowerCase().slice(0, value.length) === value
        )
      });
    }
  })

---

因为then中的函数是一个回调函数，在正常函数（非箭头函数）的情况下，稍后将调用该函数这指向调用函数的对象，因此此内部回调不会指向您的自动完成类对象，这就是您出现错误的原因

您可能希望更好地了解ES6中的JS

此

范围和

词法此

。感谢您的回复。问题解决了。