Javascript Reactjs在componentDidMount上异步获取数据

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

API.js

Info.js

但它给了我这个：

Promise {<pending>}...

---

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

这是因为setState是异步的。像这样尝试，你会得到你期望的结果：

this.setState({
  result: result
}, () => console.log(result);

---

如果您使用此功能，则会有一些关于它的信息，请进一步搜索回调。

这可能会为您解决此问题

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

import API from 'API'

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

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

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

---

没有改变，仍然没有回报。而且我返回的结果不是this.state.result，所以在这种情况下setState是异步的并不重要。我只是返回结果，不需要再在API中等待。js@NickyPrabowo不，当我删除wait时，它返回nullOk，然后Promise pending意味着您需要在info.js中的结果中添加than。@NickyPrabowo您能提供一个答案吗？您没有任何描述，但是我尝试了这个，它在console.log中正确返回，但是当我想呈现它时{this.state.result.name}它给我错误类型错误：当它在控制台中工作时，无法读取null的属性“name”。logthis.state.result.name能否将componentDidMount更改为componentWillMount并重试？componentDidMount是在第一次渲染后调用的，所以我认为您遇到了这个问题。我不知怎么搞明白了。。起初它返回null，所以它给了我那个错误，几秒钟后它给了我正确的数据，所以我修复了{this.state.result！=null？this.state.result.name:null}的问题，所以我可以避免返回null吗？Hi@tourtravel，最好将它更改为只使用&&或者将结果初始状态更改为未定义

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

import API from 'API'

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

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

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