從多個網址獲取和存儲SectionList的部分數據的數據

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

每個部分的數據可以通過不同的網址中獲取，而他們基本上具有相同的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)) 
    }); 
}