Fetch APIを使用してReactでデータを取得できません

Question

私はmakeとapiを呼び出してデータを取得する次の関数を用意しました。

export function getUserData(url){ 

    return fetch(url, { credentials : 'include'}) 
       .then((response) => { return response.json()}) 
       .then((data) =>{ return new User(data.uid, data.givenName, data.familyName)}) 
} 

これは私のユーザーオブジェクトです。

class User{ 
    constructor(uid, givenName, familyName){ 

    this.uid = yguid; 
    this.givenName = givenName; 
    this.familyName = familyName; 
    } 
} 
export default User; 

私のリアクションコンポーネントで、私はUserオブジェクトをインスタンス化しようとしています。

class Header extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { fullName: null, yguid: null }; 

    } 
    componentWillMount(){ 
     user = getUserData(url); 
     console.log(user); 
     //set state with User data 
    } 

Reactコンポーネントには次のインポートステートメントがあります。

import User from '../models/user'; 
import '../api/util'; 

私のユーザと関数getUserDataはどちらも未定義です。私は間違って何をしていますか、それをどうやって修正しますか？前もって感謝します。

Answer 1

あなたのコードuser = getUserData(url)は、ユーザーをフェッチする予定です。そこにリゾルバも設定する必要があります。私はそれを書くだろう

componentWillMount(){ 
let user; 
// getUserData actually returns a promise. resolve with a .then and set user to result 
getUserData(url).then((result) => { 
user = result; 

console.log(user); // user should be defined here 

// not sure if user is a state object or not but if it is set it like this 
this.setState({user: user}) 
}) 
}