React: Wie verschiebe ich meinen ajax api Anruf in eine separate Komponente?

Question

Hier ist eine typische Behälterkomponente, die sehr gut funktioniert:

const API = 'https://randomuser.me/api/?results=5'; 
class App extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { profiles: [] }; 
    } 

    componentDidMount() { 
     this.fetchProfiles(); 
    } 

    fetchProfiles() { 
     let url = API; 
     fetch(url) 
     .then((res) => res.json()) 
     .then((data) => { 
      let results = data.results; 
      this.setState({ 
      profiles: results 
      }); 
     }) 
     .catch((error) => console.log('Oops! . There Is A Problem', error)); 
    } 

    render() { 
     // rendering child component here 
    } 
} 

export default App; 

Was ich versuche jetzt zu tun ist, um die fetchProfiles Funktion in eine separate api Komponente bewegen.

So mache ich eine profiles.js Datei in einem api Ordner in meinem Projekt:

const API = 'https://randomuser.me/api/?results=5'; 

export function fetchProfiles() { 
    let url = API; 
    fetch(url) 
    .then((res) => res.json()); 
} 

Und jetzt ist es meine Hauptkomponente importiert und verwendet es etwa so:

import { fetchProfiles } from '../api/profiles.js'; 


const API = 'https://randomuser.me/api/?results=5'; 
class App extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { profiles: [] }; 
    } 

    componentDidMount() { 
     fetchProfiles.then((data) => { 
     let results = data.results; 
      this.setState({ 
      profiles: results 
      }); 
     }); 
    } 

    // render call etc 

Aber wenn ich laufen die Anruf in componentDidMount wie folgt, bekomme ich diesen Fehler: Uncaught TypeError: _profiles.fetchProfiles.then is not a function. Ich versuche, mit then zu ketten, weil das Fetchapi res.json() als ein Versprechen zurückbringt.

Ich versuchte, fetchProfiles in einer äußeren Funktion zu verpacken, in einem neuen Versprechen auch! Aber nichts funktioniert !! Was mache ich hier falsch? Bitte helfen Sie mit diesem Refactoring.

Answer 1

Sie müssen fetch(url) sich zurück, so dass Sie ein Versprechen zurückkehren werden und dann können Sie then Methode verwenden:

const API = 'https://randomuser.me/api/?results=5'; 

export function fetchProfiles() { 
    let url = API; 

    // return the promise itself 
    return fetch(url).then((res) => res.json()); 
} 

Answer 2

So wie ich dieses Problem behoben war fetch(url) selbst zurück:

const API = 'https://randomuser.me/api/?results=5'; 

export function fetchProfiles() { 
    let url = API; 
    return fetch(url) 
     .then((response) => response.json()); 
} 

Dann in der Container-Komponente:

componentDidMount() { 
     fetchProfiles() 
     .then((data) => { 
      let results = data.results; 
      this.setState({ 
      profiles: results 
      }); 
     }); 
    } 

Dies funktioniert jetzt !!