我如何使一个函数再次运行，如果，只有当，它在React Native返回null ?

Question

我有一个RN/Expo项目，它有时返回一个空值，因为数据没有时间加载。

数据来自AWS服务器。

如果我刷新页面，这通常会自行修复，但这不是一个长期的解决方案。

如何修改此函数，使其在且仅当返回"null"时再次运行?对任意变量的响应?

下面是我的代码:

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

Answer 1

这是一个你可以使用的概念的例子:

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;

你可以在这里玩https://snack.expo.dev/@steppannws/d39758