如何将asynchronous状态提取发送到组件？

我目前正在一个小应用程序的乐趣。 我遇到了使用axios的问题，并将响应作为更新状态返回给我的App组件。

然后，我尝试允许另一个组件使用该状态，但我无法实际访问数据。 我可以从列表组件内console.log（道具），但我不知道如何输出实际的数据，因为我只能够输出承诺的结果。 我想能够输出props.currentUser，并有它的googleId（使用谷歌Oauth2.0）..我相信解决scheme很简单，但是，这是我的代码：

App.js – >

import React from 'react'; import helpers from '../helpers'; import List from './List'; class App extends React.Component{ state = { currentUser: null } componentDidMount() { this.setState(prevState => ({ currentUser: helpers.fetchUser() })); } render() { return ( <div> <List currentUser={this.state.currentUser}/> </div> ); } }; export default App; 

helpers.js – >

 import axios from 'axios'; var helpers = { fetchUser: async () => { const user = await axios.get('/api/current_user'); return user.data; } }; export default helpers; 

列表组件 – >

 import React from 'react'; const List = (props) => { const renderContent = () => { console.log(props); return <li>{props.currentUser}</li> } renderContent(); return ( <div> <h1>Grocery List</h1> <ul> </ul> </div> ); } export default List; 

输出 – >

 {currentUser: null} {currentUser: Promise} currentUser: Promise__proto__: Promise[[PromiseStatus]]: "resolved" 

Answer 1

因为fetchUser是一个async函数 ，所以它返回一个promise。 因此，在App组件中，您必须在该承诺的内部调用setState ，如下所示：

 componentDidMount() { helpers.fetchUser() .then(data => { this.setState(prevState => ({ currentUser: data })); }); } 

Answer 2

好的，你需要改变的是：

 componentDidMount() { this.setState(prevState => ({ currentUser: helpers.fetchUser() })); } 

至

 componentDidMount() { helpers.fetchUser().then(data => { this.setState(prevState => ({ currentUser: data })); }) } 

工作演示 （检出控制台）

注意： async await总是返回promise它只是在asynchronous函数内使同步行为，但结束的function，它总是会返回承诺。