Javascript Promise.all results from fetching multiple apis not rendering in the React Native FlatList

Question

I am using Promise.all in order to fetch multiple apis.

const ListScreen = () => {

const first = fetch('https://EXAMPLEAPI').then(resp => resp.json())
const second = fetch('https://EXAMPLEAPI').then(resp => resp.json())
const third = fetch('https://EXAMPLEAPI').then(resp => resp.json())

const retrieveAll = async function () {
    let results = await Promise.all([first, second, third])

When console.log(results), I get all arrays of objects from apis

The problem is that when I create a FlatList, I don't get anything to be rendered on the screen(blank)

const retrieveAll = async function () {
    let results = await Promise.all([first, second, third])

    return (
        <FlatList
            keyExtractor={item => item.title}
            data={results}
            renderItem={({ item }) => {
                return <Text>{item.title}</Text>
            }}
        />
    )
};

}

export default ListScreen;

What am I doing wrong?

Please help. :(

An `async` function always returns a Promise, so `retriveAll` isn't return JSX, but rather a Promise wrapping your JSX. Consider storing `results` in state and using that state in your FlatList when you return JSX from your component — Nick Parsons, Sep 18 '21 at 08:01

score 1 · Answer 1 · edited Sep 19 '21 at 06:36

You need to re-render the component, for that you will have to use react Hooks.

This is how the component will look like

const RetrieveAll = function () {
    const [ results, setResults ] = useState([])
    useEffect( () => {
        Promise.all([first, second, third])
        .then(response => {
           setResults(response)
        })

    }, [])

    return (
        <FlatList
            keyExtractor={item => item.title}
            data={results}
            renderItem={({ item }) => {
                return <Text>{item.title}</Text>
            }}
        />
    )
};

Usage

<RetrieveAll />

And try not to create async JSX elements.

Javascript Promise.all results from fetching multiple apis not rendering in the React Native FlatList

1 Answers1