Tengo un proyecto RN/Expo que, a veces, devuelve un valor nulo porque los datos simplemente no han tenido tiempo de cargarse.
Los datos provienen de un servidor de AWS.
Si actualizo la página, esto normalmente se arreglará solo, sin embargo, esta no es una solución a largo plazo.
¿Cómo puedo modificar esta función para que se ejecute nuevamente, si, y solo si, devuelve una respuesta "nula" para cualquiera de las variables?
A continuación se muestra mi código:
const [ firstName, getFirstName ] = useState('') const [ phone, getPhone ] = useState('') const [ email, getEmail ] = useState('') const [ userPhoto, getUserPhoto ] = useState(null) useEffect(()=>{ const info_response = server_grab.get_user_info().then(response=>{ const displayName = async()=>{ getFirstName( <Text style = {styles.title}> {response.first_name} {response.last_name} </Text> ) getPhone( <Text style = {styles.box_text}> {response.phone} </Text> ) getEmail( <Text style = {styles.box_text}> {response.email} </Text> ) } ) } const displayPhoto = async () =>{ const photo_response = server_grab.download_profile_photo().then(response=>{ getUserPhoto(response.photo_data.raw_data) } ) } displayPhoto() displayName()...
return( <View> {userPhoto && <Avatar.Image source= {{uri:`data:image/jpg;base64,${userPhoto}`}}/>} </View> <View> <Text>{firstName}</Text> <Text>{email}</Text> <Text>{phone}</Text> </View> )Este es un ejemplo del concepto que podrías usar:
import { Text, View, Image, ActivityIndicator } from 'react-native'; const simulateApiCall = (type, timeout = 1000 ) => new Promise((resolve, reject) => { setTimeout(() => { switch(type){ case "firstName": resolve('John'); break; case 'lastName': resolve('Doe'); break; case 'avatar': resolve('https://cdn1.vectorstock.com/i/1000x1000/31/95/user-sign-icon-person-symbol-human-avatar-vector-12693195.jpg'); break; } }, timeout); }); const Home = () => { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [userAvatar, setUserAvatar] = useState(null); const [isLoading, setIsLoading] = useState(false); useEffect(() => { loadUserData(); }, [loadUserData]); const loadUserData = useCallback(async () => { setIsLoading(true); try { const userFirstName = await simulateApiCall('firstName'); const userLastName = await simulateApiCall('lastName'); setFirstName(userFirstName ?? ''); setLastName(userLastName ?? ''); setIsLoading(false); loadUserAvatar(); } catch (error) { setIsLoading(false); console.log('Error loading user data'); } }, [loadUserAvatar]); const loadUserAvatar = useCallback(async () => { try { const userAvatar = await simulateApiCall('avatar', 2000); setUserAvatar(userAvatar); } catch(error){ console.log('Error loading user avatar') } }, []); return(<View> {isLoading ? <ActivityIndicator /> : <> {userAvatar && <Text>{userAvatar}</Text>} <Text>{firstName}</Text> <Text>{lastName}</Text> </> } </View>); } export default Home;Puedes jugar por aquí https://snack.expo.dev/@steppannws/d39758