CODEWITHSUNDEEP
javascriptreact-nativeflatlistpromise.all
Florin
Florin

Reputation: 9

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

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. :(

Upvotes: 0

Views: 281

Answers (1)

FnH
FnH

Reputation: 757

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.

Upvotes: 1

Related Questions