React - Demande de données en utilisant Fetch

Question

J'essaie d'obtenir des données d'une API en utilisant Fetch sans succès. Pour une raison quelconque, la requête échoue et je ne suis pas en mesure de rendre les données ... comme je suis assez nouveau pour Réagir et Récupérer je ne suis pas sûr où l'erreur est. Est-ce quelque chose à voir avec la façon dont je demande l'API?

Nous vous remercions à l'avance

class App extends React.Component { 
    render() { 
    return <Data /> 
    } 
} 


class Data extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     requestFailed: false, 
    } 
    } 

    componentDidMount() { // Executes after mouting 
    fetch('https://randomuser.me/api/') 
     .then(response => { 
     if (!request.ok) { 
      throw Error("Network request failed.") 
     } 
     return response 
     }) 
     .then(d => d.json()) 
     .then(d => { 
     this.setState({ 
      data: d 
     }) 
    },() => { 
     this.setState({ 
     requestFailed: true 
     }) 
    }) 
    } 


    render() { 

    if(this.state.requestFailed) return <p>Request failed.</p> 
    if(!this.state.data) return <p>Loading</p> 

    return (
     <h1>{this.state.data.results[0].gender}</h1> 
    ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('app')); 

CodePen

Answer 1

Comme mentionné sur le GITHUB docs, vous pouvez mettre en œuvre l'opération d'extraction comme

fetch('https://randomuser.me/api/') 
    .then((response) => { 
    return response.json() 
    }).then((d) => { 
    console.log('parsed json', d) 
    this.setState({ 
      data: d 
    }); 
    }).catch(function(ex) { 
    console.log('parsing failed', ex) 
    this.setState({ 
     requestFailed: true 
     }) 
    }) 

CODEPEN

Answer 2

méthode devrait être d'extraction

fetch('your_url') 
    .then ( 
    response => { 
    if (response.status !== 200) { 
     return 'Error. Status Code: ' + response.status 
    } 
    response.json().then(result => console.log(result)) // do sth with data 
    } 
) 
    .catch(function(err) { 
    console.log('Opps Error', err) 
}) 

Answer 3

Je pense que votre problème est avec

.then(response => { 
    if (!request.ok) { 
     throw Error("Network request failed.") 
    } 
    return response 
    }) 

Il n'y a pas demande objet qui a la propriété ok. Peut-être que vous voulez vérifier response.ok?

.then(response => { 
    if (!response.ok) { 
     throw Error("Network request failed.") 
    } 
    return response 
    })