时间戳

首页 > 解决方案 > Reactjs 在 componentDidMount 上异步获取数据

javascript - Reactjs 在 componentDidMount 上异步获取数据

问题描述

我想做的是，在渲染之前获取用户数据，我创建了一个对象调用 API，它使用 axios 从 api 获取数据（它成功了）现在我想在 info.js 组件上获取它，所以我在 componentDidMount 上调用它：

API.js

const API = {
  async getUser() {
    const cookies = new Cookies();
    const token = cookies.get('token');
    let result = null;

    if (token) {
      await axios.get('http://localhost:8000/api/user').then(res => {
        if (res.data.success) {
          result = res.data.success;
        }
      });
      return await result;
    } else {
      return false;
    }
  }
};

Info.js

import API from 'API'

export default class UserInfo extends React.Component {
    constructor() {
        super();
        this.state = {result: null};
    }

    componentDidMount() {
        let result = API.getUser();
        this.setState({
            result: result
        });
        console.log(result)
    }

    render() {
        return(
            <div className="UserInfo">
                {this.state.result}
            </div>
        )
    }
}

但它给了我这个：

Promise {<pending>}...

所以我很困惑，我做错了什么？

标签： javascriptreactjs

解决方案

   async componentDidMount() {
        let result = await API.getUser();
        this.setState({
            result: result
        });
        console.log(result)
    }

推荐阅读