使用React Native对接AWS时如何确保每次都正常加载展示用户个人资料

问题根源 #

你现在遇到的渲染不稳定问题来自几个明显的逻辑缺陷：

• 抽屉内容组件的useEffect依赖为空数组，仅在组件第一次挂载时执行1次请求。如果抽屉组件在用户登录前就已经挂载，后续打开抽屉不会重新触发数据拉取，就会出现有时有数据、有时空数据的情况。
• 所有请求都没有加异常捕获逻辑，一旦AWS接口超时、鉴权失效、返回异常，state不会更新，界面就会一直为空。
• 你把JSX元素直接存到state中，不符合React最佳实践，容易引发额外的渲染异常。
• 头像的拉取逻辑直接写在组件顶层，没有包裹在effect里，每次组件重渲染都会触发一次重复请求，逻辑混乱。

修复方案 #

建议结合抽屉的激活状态触发请求，保证每次打开抽屉都能拉取最新数据，同时增加异常处理：

第一步：依赖检查

如果用的是@react-navigation/drawer，直接用内置的useIsFocused判断抽屉是否处于激活状态即可，无需额外安装依赖。

第二步：修改组件代码

import { useIsFocused } from '@react-navigation/native';
// 按你实际用的组件库导入对应组件
import { Text, View } from 'react-native';
import { Avatar, Title } from 'react-native-paper';

export function DrawerContent (props){
  // 监听抽屉是否处于打开激活状态
  const isDrawerOpen = useIsFocused();
  // 存原始数据，不要存JSX元素
  const [userInfo, setUserInfo] = useState({
    firstName: '',
    lastName: ''
  });
  const [imageData, setImageData] = useState(null);
  // 异常标记位，请求失败可给用户提示
  const [loadError, setLoadError] = useState(false);

  // 依赖加isDrawerOpen，每次抽屉打开都会自动触发请求
  useEffect(() =>{
    if(!isDrawerOpen) return;
    // 拉取用户基础信息
    const fetchUserInfo = async () =>{
      try {
        setLoadError(false);
        const real_response = await client_instance.get_user_info();
        setUserInfo({
          firstName: real_response.first_name,
          lastName: real_response.last_name
        });
      } catch (err) {
        console.log('拉取用户信息失败', err);
        setLoadError(true);
      }
    };
    // 拉取用户头像
    const fetchUserAvatar = async () => {
      try {
        const res = await client_instance.download_profile_photo();
        setImageData(res.raw_data);
      } catch (err) {
        console.log('拉取头像失败', err);
      }
    };

    fetchUserInfo();
    fetchUserAvatar();
  }, [isDrawerOpen]);

  return (
    <>
      {/* 此处保留你原来的其他抽屉内容 */}
      <View style = {{marginLeft: width*0.021, flexDirection: 'column'}}>
        <Title style = {styles.title}>
          {/* 渲染逻辑直接写在模板中，不要存到state */}
          {loadError ? '加载失败' : `${userInfo.firstName} ${userInfo.lastName}`}
        </Title>   
      </View>
      <View>
        {imageData && <Avatar.Image source={{uri:`data:image/jpg;base64,${imageData}`}}/>}
      </View>
      {/* 此处保留你原来的其他抽屉内容 */}
    </>
  )
}

额外优化建议 #

如果要进一步提升加载速度，可以把用户信息和头像存在本地缓存（比如expo-secure-store或者AsyncStorage），每次打开抽屉先渲染缓存的数据，同时拉取最新数据更新缓存和界面，用户感知的加载速度会更快。

内容的提问来源于stack exchange，提问作者MK_Pierce