当且仅当它在 React Native 中返回 null 时，如何使函数再次运行？

Posted 2023-03-17

【中文标题】当且仅当它在 React Native 中返回 null 时，如何使函数再次运行？

【英文标题】：How do I make a function run again if, and only if, it returns null in React Native?

【发布时间】：2021-12-13 22:21:44

【问题描述】：

我有一个 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>

)

【问题讨论】：

哪个函数？

@anthony_718 我希望 displayName 和 displayPhoto 都使用这个，因为有时它们中的一个或两个都会发生这种情况

我认为您不会以典型的 React/async 方式考虑这个问题。标准方法是获取用户信息，并在收到信息时设置相应的状态属性（尽管这似乎没有必要；可以保留整个响应并解构）。这就是您需要做的所有事情，除非您想以不同的方式处理预数据渲染，这可以通过条件渲染或 <Text> 的包装器或其他方式来处理。

使displayName 异步是没有意义的，其中没有任何异步。它和displayPhoto 都没有返回任何东西，所以它们是无操作的。它们也是 async get_user_info 函数的本地函数，因此无论如何都不能在其他任何地方使用。

不止于此。并重命名它们；他们是setter，而不是getter。花时间退后一步可能是值得的——我显然不确定，但我的印象是一般来说异步编程以及如何/何时处理异步解析存在一些混淆。

【参考方案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