如何在同一页面的 React-native 中从多个 api 端点获取数据

Question

我正在尝试从两个不同的 api 端点获取数据，并尝试在我的 React 本机应用程序的同一页面中显示整个数据这是我使用代码片段得到的错误的快照

Answer 1

The same exception was coming for me as well...tried a different approach.Chained one fetch method in another and tried to set the value into all the datasource variables in the first fetch block and then used the 2nd variable in the next fetch block again.

The issue got resolved and the values are now coming as required. Don't know if this is the perfect approach but it solved the issue, please try to refer the below example

fetch(‘endpoint1’, {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json'
        },
        body: JSON.stringify({
            //send the parameters you need to use to fetch the data 
 from endpoint
    //e.g.  “id”: this.state.id,
    …   
        })
    })
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                isLoading: false,
                dataSource1: responseJson,
                dataSource2: responseJson,
            })

        })
        .then(()=>{
        fetch(‘endpoint2', {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json'
        },
        body: JSON.stringify({
            //send the parameters you need to use to fetch the data 
from endpoint
    //e.g.  “id”: this.state.id,
    …   
        })
    })
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                isLoading: false,
                dataSource2: responseJson,
            })
        })
        })
        .catch((error) => {
            console.error(error);
        });