非同期状態フェッチをコンポーネントに送信する方法は？

Question

私は現在、楽しいために小さなアプリを開発中です。私はAxiosを使用し、Appコンポーネントに応答を更新された状態として返す問題に遭遇しました。

次に、別のコンポーネントがその状態を使用できるようにしようとしましたが、実際にデータにアクセスできません。私はListコンポーネント内からconsole.log（props）を実行できますが、私はプロミスの結果しか出力できないので、実際のデータを出力する方法がわかりません。 - >

App.js：私は、私は解決策は単純ですが、ここに私のコードであると確信しています。..出力props.currentUserにできるようにしたいし、それが（グーグルOauth2.0を使用して）googleIdも持っています

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

オーケー変更する必要があるすべては次のとおりです。

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

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

WORKING DEMOに（コンソールをチェックアウト）

注：asyncawaitは常にpromiseを返すだけで、 の同期動作は非同期関数内で行われますが、終了すると 関数は常に約束を返します。

Answer 2

fetchUserはasync functionであるため、約束を返します。したがって、Appコンポーネントでは、あなたはその約束の.then内setStateを呼び出す必要があり、そのよう：コリン・デソト@

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