How can I fetch data from multiple api endpoints in React-native in the same page

Question

I'm trying to fetch data from two different api-endpoints and trying to show the whole data in the same page in my React native appThis is the snapshot of the error I'm getting with the code snippet

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