使用函数获取 API 数据并填充提供程序 [关闭]

Question

我尝试使用函数从 API 获取数据，然后在我的 React 提供程序中设置状态。

如果我像这样直接在componentDidMount 中这样做，效果很好：

componentDidMount() {
axios({
  method: "post",
  url: "https://example.com",
  // data: formData,
  headers: {
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
  }
}).then(res => {
  this.setState({
    TabPass: res.data
  });
});
    }

我试图获得相同的结果，但将 axios 放入一个单独的文件中，一旦获得数据，我就会在我的提供程序中执行 setState。

我在 api.js 中试过这个

export function GetPass ()
{
    axios({
        method: "post",
        url: https://example.com",
        // data: formData,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
        }
      })
        .then(res => {
            return res.data;
        }
        )
}

在 Provider.js 中

  componentDidMount() {

    const Tab = GetPass();
      this.setState({
        TabPass:Tab,
      })
    }
  }

标签未定义

Answer 1

在 api.js 中

export function GetPass ()
{
    //Following will return a promise with the data once resolved
    return axios({
        method: "post",
        url: https://example.com",
        // data: formData,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
        }
      })
        .then(res => {
            return res.data;
        }
        )
}

在 Provider.js 中

componentDidMount() {
    // As the axios promise will resolved your state will change
    GetPass()
      .then(Tab => { this.setState({
        TabPass: Tab,
      }))
    }}