Axios React 不附加信息获取请求

Question

我一直在 Stack 上寻找一段时间，但我无法找到解决方案。

我有一个调用的方法应该使用 Axios 执行 GET 请求。

在方法开始时我创建了一个新的 hash ，所以我想将所有信息存储在那里，然后返回那个 hash。

import React, {Component} from "react";
import axios from 'axios';
class Json extends Component{
  getInformation(){
    let inf = {};
     axios
      .get("http://codepen.io/jobs.json")
      .then(result=> {
        inf.description = result.data.jobs[0].description;

      })
      .catch(err=>{
        console.log("STH WRONG");
      });

      console.log(inf);
    return(inf);
  }

那我的问题是什么？？？如果我检查 inf 变量中的内容，它是空的。但是，如果我使用 Chrome 进行检查，在控制台上我会看到它是空的，但是当我仔细检查时，键和值就在那里。目前我正在尝试使用inf.description 检索信息是未定义的。

有什么想法吗？？随意尝试这个例子，只需调用这个方法来检查它。

编辑

import React, {Component} from 'react';
import axios from 'axios';
class Json extends Component{
  constructor(props){
    super(props);
    this.state={title: ""};

  }
  getInformation(){
    let inf = {};

    // .get("/data/CA_data.json")
     axios
      .get("http://codepen.io/jobs.json")
      .then(result=> {
        inf.description = result.data.jobs[0].description;

      })
      .catch(err=>{
        console.log("STH WRONG");
      });

      console.log(inf);
    return(inf);
  }

  render(){
    let inf = this.getInformation();

    return(
      <h1>

      </h1>
    );
  }
}


export default Json;

Answer 1

当您使用axios 发出get 请求时，您正在调用创建一个Promise 对象的东西，该对象表示所发出的异步请求的状态。这可能是失败的响应、已解决（成功）的响应或待处理。

您在获取正确状态时遇到问题的原因是您在调用 get 调用后立即记录了数据，此时，inf.description 不是您所期望的，但很可能是状态为 'pending' 的 Promise 对象。

以下是为您推荐的解决方案：

import React, {Component} from "react";
import axios from 'axios';
class Json extends Component{
  constructor(props){
    super(props);
    this.state = { inf: {} }
  }
  componentDidMount(){
    this.getInformation();  // make the axios call in this lifecycle method
  }
  getInformation(){
    return axios
      .get("http://codepen.io/jobs.json")
      .then(result=> {
        this.setState({ inf.description: result.data.jobs[0].description });
        // this.state.inf.description is available here because
        // then() gets called once the promise has been resolved

        // the call to this.setState causes a re-render of this component
      })
      .catch(err=>{
        console.log("STH WRONG");
      });
  }
  render(){
    // this header will initially show the initial value of description
    // once the PROMISE from the getInformation call within 
    // componentDidMount resolves and calls this.setState, 
    // this component will re-render with the updated state value(s)

    <div>{ this.state.inf.description }</div>
  }
}