scope de données dans React using Fetch

Question

J'essaie de comprendre comment utiliser fetch pour obtenir des données d'une API et l'utiliser pour créer des composants React. Je suis un peu confus si c'est la méthode correcte pour récupérer, stocker et utiliser les données, ou s'il y a une autre façon que je ne pourrais pas être au courant (j'ai lu quelque chose dans les docs sur les états et les montages mais je ne pouvais pas autour d'elle.

JS

//Data 
const url = 'https://api.tfl.gov.uk/BikePoint'; // API 

fetch(url) 
.then((resp) => resp.json()) // Transform the data into json 
.then(function(data) { 
    // How can I make data accessible outside this function? 
}) 

.catch(function(error) { 
    console.log(JSON.stringify(error)); 
}); 

//React 
const List = ({items, each}) => 

    <div className = "panel panel-default"> 
    <div className = "panel-heading"><h2>Bike points</h2></div> 
    <div className = "panel-body"> 

     <ul className = "list-group">{items.map((item, key) => 
     <ListItem key = {key} item = {each(item)} number={item.commonName}/>)}</ul> 

    </div> 
    </div> 

const ListItem = ({item, arrival, number}) => 
    <li className = "list-group-item">{number}</li> 

//How can access the data here? 
ReactDOM.render(<List items={data} each={ListItem} />, document.querySelector('#main')) 

CodePen

Je vous serais reconnaissant si vous pouviez me signaler à toute ressource qui peut me Merci comprendre ce concept. aide à l'avance.

Answer 1

dans votre code d'exemple, vous n'êtes pas retu Si rning le 'resp.json()', resp.json() renverra une promesse, vous devrez le retourner et s'il se résout avec succès, alors 'data' dans votre prochain .then() sera rempli avec l'objet du Réponse de l'API Vous pouvez ensuite définir les données de réponse dans votre état de composant pour faire quelque chose.

J'ai créé une application avec simple, réagir 'créer une réaction-app' pour démontrer:

import React, { Component } from 'react'; //import 'React' default export, and { Component } non-default export from react 
import fetch from 'isomorphic-fetch'; // isomorphic-fetch is used for both server side and client side 'fetch' (see https://github.com/matthew-andrews/isomorphic-fetch) 
// App.css was a hangover from the create-react-app, it's not really needed for this basic example 
const url = 'https://api.tfl.gov.uk/BikePoint'; // API 




class App extends Component { // This is the same as 'extends 'React.Component' 

    constructor(props) { 
     super(props); 
     this.state = { 
      fetchedData: null // stores the result of the fetch response body converted to a javascript object 
     }; 
    } 

    fetchIt =() => { 
     console.log('fetching it'); 
     fetch(url, { mode: 'cors' }) // Make sure fetch is cross-origin, it's not by default (see https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) since the target URL of the API is a different 'origin' to our react app 
      .then((resp) => { 
      console.log(resp); 
      return resp.json(); }) 
      .then((data) => { // data input parameter is the result of the resolved resp.json() Promise (see https://developer.mozilla.org/en-US/docs/Web/API/Body/json) 
       console.log(data); 
       this.setState({ fetchedData: data }); // setState sets the component state with the data from the API response 
      }) 
      .catch(function(error) { 
       console.log(JSON.stringify(error)); 
      }); 
    } 



    render() { 
     if(!this.state.fetchedData){ // only do the fetch if there is no fetchedData already (BTW this will run many times if the API is unavailable, or 'fetchIt() encounters an error) 
      this.fetchIt(); 
     } 

    return (
     <div> 
      { 
       this.state.fetchedData ? `fetched ${this.state.fetchedData.length} entries` : 'no data' // This is a 'ternary' expression, a simple 'if->else' 
       /* equivalent to: 

       if(this.state.fetchedData) { 
        return `fetched ${this.state.fetchedData.length} entries`; // this is 'javascript string interpolation' 
       } else { 
        return 'no data'; 
       } 
       * 
       * */ 
      } 
     </div> 
    ); 
    } 
} 

export default App; // Export our component to be used by other react higher order components (parents), in this case, it's imported in 'index.js', data is only fetched when the component renders. 

repo de travail github ici: https://github.com/finbarrobrien/fetchy/blob/master/src/App.js