API加载过程中如何正确实现MUI Skeleton骨架屏效果？

问题原因 #

你之前把<Skeleton />写在accountData.usersAccountData.map内部无法生效，是因为接口加载阶段accountData.usersAccountData是空数组，map遍历根本不会执行，自然无法渲染出骨架屏。

实现步骤 #

1. 维护独立的加载状态 #

不要依赖数组长度判断加载状态（避免接口真实返回空数组时骨架屏无法消失），需要单独维护isLoading状态标记接口请求状态：

• 如果你是手动写请求逻辑，参考如下状态定义：

const [accountData, setAccountData] = useState({ usersAccountData: [] });
const [isLoading, setIsLoading] = useState(false);

const fetchAccountData = async () => {
  setIsLoading(true);
  try {
    const res = await fetch('/your-api-path');
    const data = await res.json();
    setAccountData(data);
  } catch (err) {
    // 错误处理逻辑
  } finally {
    setIsLoading(false);
  }
};

• 如果你使用React Query、SWR这类数据请求库，库本身会返回isLoading状态，直接使用即可，无需手动定义。

2. 分支渲染骨架屏与真实内容 #

加载阶段手动构造固定长度的占位数组，遍历渲染Skeleton组件，加载完成后再切换为真实数据的遍历渲染。注意骨架屏的尺寸、边距要和真实列表项保持一致，避免加载完成后布局跳动：

{
  isLoading ? (
    // 骨架屏占位：数组长度可根据业务常见的列表条数调整，一般设3-5即可
    Array.from({ length: 3 }).map((_, index) => (
      <Skeleton
        key={`account-skeleton-${index}`}
        variant="rectangular"
        width="100%"
        height={72} // 替换为你真实用户列表项的高度
        sx={{ mb: 2 }} // 替换为你真实列表项的下边距，保证布局一致
      />
    ))
  ) : (
    // 加载完成后渲染真实业务UI
    accountData.usersAccountData.map((userData, index) => (
      // 你原来的用户项UI代码
    ))
  )
}

优化提示 #

• 如果你的列表支持分页，翻页加载时也可以用同样的逻辑，在列表底部追加骨架屏占位即可。
• Skeleton组件的variant属性可以根据你的UI结构调整：文本内容用text、圆形头像用circular、整块卡片用rectangular，还原度更高。

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