React Native -Flatlist renderItem 承诺

Question

I have a working flatlist in react native

<FlatList 
                            data={orders} 
                            keyExtractor={item => item._id}
                            renderItem={({ item }) => (renderItem(item))}
                            />

I've added a new promise withing my renderItem function like :

const renderItem = (item) => {

    const getRestaurant = async (id) => {

        uri = 'https://xxx.xxx.xxx/api/list/xxx/' + id ;

        return fetch(uri)
                .then((response) => response.json())
                .then((json) => {
                    return json;
                    //console.log("json=>"+json[0].name);
                })
                .catch((error) => {
                    console.error(error);
                });

    }

   

    const promise = getRestaurant(item.restaurantId);

 promise.then(data =>{

        console.log(data[0].name)

        return (
        <Text>{data[0].name}</Text>
        )
    })}

If I do a

console.log(data[0].name) 

the information i am looking for is correct but i simply cannot return that information in my flatlist to be displayed . Ive done something like :

 return (
        <Text>{data[0].name}</Text>
        )

but nothing is being display on my flatlist !

Can anyone please help me . Thank you

Answer 1

You cannot use the variables directly inside the component , you need to use state.

Because when there is a change in state , react-native will render your components.

For example you can make use of useState hook

1. first import useState from like below

   import React, { useState } from "react";

and then inside ur function

  const [response, setResponse] = React.useState(false);

and then inside ur promise

 promise.then(data =>{
        setResponse(data[0].name)
        return (
        <Text>{response}</Text>
        )
    })}