Nicht möglich, Daten mit Fetch-API in React

Question

zu erhalten Ich habe die folgende Funktion, die und API ruft und erhält Daten.

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)}) 
} 

Dies ist mein Benutzerobjekt.

Jetzt in meiner Komponente reagiere ich versuchen, das Benutzerobjekt zu instanziieren.

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 
    } 

Ich habe die folgenden Importanweisungen in meiner React-Komponente.

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

Sowohl mein Benutzer als auch meine Funktion getUserData sind nicht definiert. Was mache ich falsch und wie repariere ich es? Danke im Voraus.

Answer 1

Ihr Code user = getUserData(url) setzt den Benutzer auf ein Abrufversprechen. Sie müssen dort auch einen Resolver einrichten. Ich würde es schreiben wie

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}) 
}) 
}