Récupère et stocke les données de plusieurs URL pour les données des sections de SectionList

Question

Je voudrais utiliser le SectionList dans la réaction native.

export default class Home extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      dataSource: [ 
       { 
        title: 'New List', data: [] 
       }, 
       { 
        title: 'Old list', data: [] 
       }, 
      ] 
     } 
    } 

    render() { 
     return (
      <SectionList 
       style={styles.SectionContainer} 
       sections={this.state.dataSource} 
       renderSectionHeader={this._renderSectionHeader} 
       renderItem={this._renderItem} 
       keyExtractor={(item) => item.id} 
      /> 
     ) 
    } 
} 

Les données de chaque section peut être récupéré par url séparée, et ils ont essentiellement les mêmes données JSON:

getNewList() { 
    const url = website + '/api/new-list/'; 
    return fetch(url) 
     .then((res) => res.json()) 
     .catch((err) => console.log(err)) 
}, 

getOldList() { 
    const url = website + '/api/old-list/'; 
    return fetch(url) 
     .then((res) => res.json()) 
     .catch((err) => console.log(err)) 
} 

Comment chercher et stocker les données de réponse pour le dataSource de SectionList?

Answer 1

On dirait que vous devez lancer plusieurs promesses et attendre que tout soit terminé. Axios a un super utilitaire d'aide .all qui vous permet de passer dans un tableau de promesses et attend tous à terminer avant d'exécuter la résolution:

function getUserAccount() { 
    return axios.get('/user/12345'); 
} 

function getUserPermissions() { 
    return axios.get('/user/12345/permissions'); 
} 

axios.all([getUserAccount(), getUserPermissions()]) 
    .then(axios.spread(function (acct, perms) { 
    // Both requests are now complete 
    })); 

Vous pouvez aussi faire quelque chose près de cela en utilisant des promesses indigènes:

getLists(){ 
    this.getListData().then(responses => { 
     this.setState({ 
      dataSource: [ 
       { 
        title: 'New List', data: responses[0] 
       }, 
       { 
        title: 'Old list', data: responses[1] 
       }, 
      ] 
     )}; 
    }); 
} 
getListData(){ 
    return new Promise((resolve, reject) => { 
     let completes = 0; 
     let responses = []; 
     let url = website + '/api/new-list/'; 
     fetch(url) 
      .then((res) => { 
       responses.push(res.json()); 
       completes++; 
       if(completes === 2){ 
        resolve(responses); 
       } 
      }) 
      .catch((err) => console.log(err)); 

     url = website + '/api/old-list/'; 
     fetch(url) 
      .then((res) => { 
       responses.push(res.json()); 
       completes++; 
       if(completes === 2){ 
        resolve(responses); 
       } 
      }) 
      .catch((err) => console.log(err)) 
    }); 
}