React中使用axios按需请求数据时如何优雅处理loading加载状态？

核心原因 #

首次渲染时异步请求尚未返回，item为初始空值，直接取属性会得到undefined，因此出现半空白的渲染结果。以下是几种常用的处理方案：

方案1：独立加载态占位（适用绝大多数场景） #

通过单独的状态控制加载阶段的展示内容，是目前最通用的处理方式：

• 新增loading状态，请求发起时设为true，请求结束（无论成功/失败）设为false
• 渲染时先判断loading状态，优先展示加载提示/骨架屏，数据返回后再渲染真实内容
• 额外新增错误状态兜底请求失败的场景

代码示例：

import { useState, useEffect } from 'react'
import axios from 'axios'

function Announcement() {
  const [item, setItem] = useState({})
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  useEffect(() => {
    const fetchAnnouncement = async () => {
      try {
        const res = await axios.get('你的公告接口地址')
        setItem(res.data)
      } catch (err) {
        setError('公告加载失败，请稍后刷新重试')
      } finally {
        setLoading(false)
      }
    }
    fetchAnnouncement()
  }, [])

  // 加载中展示
  if (loading) return <div>公告加载中...</div>
  // 请求失败展示
  if (error) return <div>{error}</div>
  // 数据返回后展示真实内容
  return (
    <div>
      <p>Title: {item.title}</p>
      <p>Content: {item.description}</p>
    </div>
  )
}

如果对体验要求更高，可以把加载中的文字替换为和公告模块尺寸一致的骨架屏，避免加载完成后出现布局跳动。

方案2：可选链+默认值兜底（适用轻量场景） #

如果接口响应速度快，不想单独做加载态模块，可以直接在渲染层加默认值兜底，代码更简洁：

• 用可选链?.避免空值读取报错，用空值合并运算符??设置默认占位内容
• 不需要额外维护loading状态，请求返回后会自动替换默认内容

代码示例：

<div>
  <p>Title: {item?.title ?? '加载中...'}</p>
  <p>Content: {item?.description ?? '加载中...'}</p>
</div>

方案3：Suspense 统一处理（React 18+ 推荐） #

如果使用React 18及以上版本，且项目中用了支持Suspense的数据请求库（如React Query、SWR），可以用Suspense统一处理加载态，不需要每个组件单独维护loading逻辑：

import { Suspense } from 'react'
import Announcement from './Announcement'

function Page() {
  return (
    <Suspense fallback={<div>公告加载中...</div>}>
      <Announcement />
    </Suspense>
  )
}

公告组件内部只需要处理数据渲染逻辑，加载和错误统一由上层处理，代码分层更清晰。

额外注意 #

你原视图代码中的{itme.title}为拼写错误，实际开发中需要修正为{item.title}，避免出现非逻辑类bug。

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