Javascript 从utils文件中的函数返回值到react组件中的状态

我正试图重构我的函数，以一种干净的方式将它们模块化。我需要从函数中获取返回值，并将它们分配给组件中的某个状态。这些函数已经在我使用的axios控制台中调用并记录了值。但它不设置状态，我无法将值呈现到屏幕上

export const getWalletBalance = token => {
  let Amount = '';
  console.log('get wallet balance');
  axios
    .get(`${Routes.walletBalance}`, {headers: {token: token}})
    .then(async res => {
      console.log(res);
      return await (Amount = res.data.value.response);
    })
    .catch(err => {
      return console.log(err.response);
    });
  return Amount;
};

这是设定状态

            this.setState({Amount: getWalletBalance(token)});

我应该使用async/await吗

export const getWalletBalance = token => {

  return axios
    .get(`${Routes.walletBalance}`, {headers: {token: token}})
    .then(async res => {
      return res.data.value.response; // return your amount direct
    })
    .catch(err => {
      return 0; // return your amount direct
      console.log(err.response);
    });
};

你可以像这样访问它

将此调用放在异步函数中，以便可以使用wait

let Amount = await getWalletBalance(token);
this.setState({ Amount });

你可以像这样访问它

将此调用放在异步函数中，以便可以使用wait

let Amount = await getWalletBalance(token);
this.setState({ Amount });

---

在代码中，您将异步编程模式async/await和Promissions混为一谈，而对解析的值不做任何操作

由于异步编程的工作方式，在您的承诺有机会解决之前，您会返回空字符串

执行顺序如下：

出租金额= Promise开始异步执行 返回空字符串的值 您还不正确地使用了async/await

服务 下面，您可以使用Promissions实现或async/await实现

承诺实现 异步/等待实现

---

在代码中，您将异步编程模式async/await和Promissions混为一谈，而对解析的值不做任何操作

由于异步编程的工作方式，在您的承诺有机会解决之前，您会返回空字符串

执行顺序如下：

出租金额= Promise开始异步执行 返回空字符串的值 您还不正确地使用了async/await

服务 下面，您可以使用Promissions实现或async/await实现

承诺实现 异步/等待实现

class Page extends React.Component {
  constructor() {
    this.state = {
      token: '<token>',
      Amount: null
    };
  }

  // Implementation with promises
  componentDidMount() {
    getWalletBalance(this.state.token)
      .then((balance) => {
        this.setState({ Amount: balance });
      })
  }

  render() {
    return (
      <p>
        {this.state.Amount}
      </p>
    );
  }
}

class Page extends React.Component {
  constructor() {
    this.state = {
      token: '<token>',
      Amount: null
    };
  }

  // Implementation with async/await
  async componentDidMount() {
    const balance = await getWalletBalance(this.state.token)
    this.setState({ Amount: balance });
  }

  render() {
    return (
      <p>
        {this.state.Amount}
      </p>
    );
  }
}