Question

我正在使用axios发出请求。我知道，当我提出get请求时，我会得到正确的数据。

我的构造函数中有一个数组（allQuotes）。但是，当我尝试在componentDidMount中引用它时，它是未定义的。

class App extends Component {

  constructor() {
    super();
    this.allQuotes = [];
  }

  componentDidMount() {

    axios.get("http://getquote.herokuapp.com/get")
    .then(function (response) {
      this.allQuotes = response.data;
      console.log(response.data);
      this.getNewQuote();
    })
    .catch(function (error) {
      console.log("Error: ", error);
      //console.dir(error);
    });
  }

}

运行此控件后，控制台会显示“无法设置未定义的属性'allQuotes'。”

为什么this未定义？

Answer 1

如果您将allQuotes置于状态然后使用setState

，情况会更好

class App extends Component {

  constructor() {
    super();
    this.state = {
      allQuotes: [],
    }
  }

  componentDidMount() {

    axios.get("http://getquote.herokuapp.com/get")
    .then(function (response) {
      this.setState({ allQuotes: response.data })
      console.log(response.data);
      this.getNewQuote();
    })
    .catch(function (error) {
      console.log("Error: ", error);
      //console.dir(error);
    });
  }

Answer 2

您可以使用箭头功能来解决此问题。问题是因为如果它是另一个函数，this引用了函数，而箭头函数没有函数，而是它的引用的this。

axios.get("http://getquote.herokuapp.com/get")
    .then((response)=>{
     ...
    })
    .catch( (error)=> {
     ...
    });

Answer 3

由于您正在使用反应，请使用州。

什么是州？

state是组件中的纯JavaScript对象，您可以使用setState将值存储在组件中。您可以参考https://reactjs.org/docs/faq-state.html

  state = {
           allQuotes: []
         }

          componentDidMount() {

            axios.get("http://getquote.herokuapp.com/get")
            .then(function (response) {
              //this.allQuotes = response.data;
              this.setState({
                  allQuotes: response.data
              })
              console.log(response.data);

              this.getNewQuote();
            })
            .catch(function (error) {
              console.log("Error: ", error);
              //console.dir(error);
            });
          }

React不能设置undefined的属性

3 个答案: