React/Javascript变量

我试图将一个对象从一个类传递到另一个类，该类位于不同的文件中。总体目标是将我的API调用整合到一个.js文件中，供整个应用程序参考

这里的问题是，我无法访问调用该类的.js文件中的对象中的变量

场景： 我在APICall.js中进行API调用，然后尝试将响应数据传递回Page.js。我可以在Page.js中看到我的对象；然而，我似乎无法访问任何变量来更新我的状态

注意：我不熟悉有坚实Python背景的ReactJS（和Javascript）。显然，这是两种完全不同的动物

感谢任何人能提供的帮助

控制台日志问题

：20对象显示为空，但在扩展时显示值

：21为空行，但应记录第一个\u名称

：30是一个空白对象

--

Page.js

APICall.js

在

getUserProfile（）

中，在axios get请求完成之前，您将返回

此状态。当您从Page.js调用
getUserProfile（）
时，您试图在get请求设置数据之前访问数据


在设置数据之前，在
componentWillMount（）
中调用承诺时，应该先在
getUserProfile（）
中返回承诺，然后使用或
.then（）

getUserProfile(){
  const URL = "https://somewebsite.com/api/user_profile/"
  const USER_TOKEN = localStorage.getItem('access_token')
  const AuthStr = 'JWT '.concat(USER_TOKEN);

  return axios.get(URL, { headers: { Authorization: AuthStr } })
};

异步/等待

async componentWillMount() {
  const userDataRes = await (new vAPI().getUserProfile());
  const userData = userDataRes.data;

  this.setState({
    first_name: userData.first_name,
    last_name: userData.last_name,
    email: userData.email,
    company: userData.company,
  });

  console.log('state', this.state);
}

承诺

componentWillMount() {
  new vAPI().getUserProfile().then((userDataRes) => {
    const userData = userDataRes.data;

    this.setState({
      first_name: userData.first_name,
      last_name: userData.last_name,
      email: userData.email,
      company: userData.company,
    });

    console.log('state', this.state);
  });
}

1.在React中，应该使用
this.setState（）
2来改变状态
axios.get（）
是异步的；当您调用
return（this.state）时API调用尚未完成。解决方案很可能是1。返回整个
axios
调用，而不是2。在
Page.js
中，调用
。然后（）在其上和内部调用
this.setState（）
谢谢@ChrisG，让我朝着正确的方向前进。我得到了完整的答案，但你让我朝着他想要的方向前进。谢谢顺便说一句，没有理由在APICall.js中使用类和状态；您只需
导出默认值{getUserProfile:（）=>{…}
并调用
vAPI.getUserProfile（）
在其他地方使用它。谢谢@RyanC！最后我提出了这样一个概念：promise，哪个是首选方法，promise还是await？我个人肯定更喜欢async/await，它使代码更干净，尤其是在执行大量异步调用时
getUserProfile(){
  const URL = "https://somewebsite.com/api/user_profile/"
  const USER_TOKEN = localStorage.getItem('access_token')
  const AuthStr = 'JWT '.concat(USER_TOKEN);

  return axios.get(URL, { headers: { Authorization: AuthStr } })
};

async componentWillMount() {
  const userDataRes = await (new vAPI().getUserProfile());
  const userData = userDataRes.data;

  this.setState({
    first_name: userData.first_name,
    last_name: userData.last_name,
    email: userData.email,
    company: userData.company,
  });

  console.log('state', this.state);
}

componentWillMount() {
  new vAPI().getUserProfile().then((userDataRes) => {
    const userData = userDataRes.data;

    this.setState({
      first_name: userData.first_name,
      last_name: userData.last_name,
      email: userData.email,
      company: userData.company,
    });

    console.log('state', this.state);
  });
}