セクションリストのセクションデータの複数のURLからデータを取得して保存する

Question

SectionListを反応ネイティブで使用したいと思います。

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

各セクションのデータが別のurlでフェッチすることができ、それらは基本的に同じ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)) 
} 

どうSectionListのdataSourceのための応答データの両方を取得し、保存することができますか？

Answer 1

複数の約束を破ってすべてを完了するのが必要なような音がします。 Axiosはあなたが約束の配列で渡すことができますし、その後解決実行する前に終了し、それらのすべてを待って素晴らしい.allヘルパーユーティリティがあります。

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

あなたはまた、ネイティブの約束を使用して、この近くに何かを行うことができます：

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