React图片滑块组件如何在首次渲染前完成API请求更新空数组state

客户端渲染模式下的React组件，无法实现初始渲染前完成异步API请求并更新state，你观察到的控制台先打印空数组、之后才打印接口返回数据是正常现象，原因如下：

• 异步网络请求不会阻塞JS主线程执行，组件首次渲染必然优先使用state的初始值，也就是你定义的空数组[]
• useEffect的回调函数会在组件第一次渲染完成、挂载到DOM之后才会执行，所以API请求必然是在首次渲染结束后才发起

你当前的代码存在潜在报错风险：isLoading初始值为false，首次渲染时会直接进入图片渲染逻辑，此时persons是空数组，访问persons[initValue].download_url会直接报错导致页面白屏，按以下步骤修复即可正常运行：

1. 修改isLoading初始值为true，保证首屏直接进入加载态

// 修改前
const [isLoading, setIsLoading] = React.useState(false);
// 修改后
const [isLoading, setIsLoading] = React.useState(true);

2. 增加边界兜底逻辑，避免请求失败时页面崩溃

return (
  <>
    {isLoading ? (
      <div>Loading...</div>
    ) : persons.length > 0 ? (
      <div>
        <img 
          src={persons[initValue]?.download_url} 
          alt="img" 
          style={{width: "100%", height: "300px", objectFit: "cover"}}
        />
      </div>
    ) : (
      <div>图片加载失败，请刷新重试</div>
    )}
  
    <button onClick={prevClick}>prev</button>
    <button onClick={nextClick}>Next</button>
  </>
)

如果需要组件渲染时直接显示图片、不出现加载提示，只能通过以下两种方案实现：

• 采用服务端渲染（SSR/SSG）方案：在服务端提前完成API请求，将数据和HTML内容一起返回给客户端，首屏渲染时即可直接使用完整数据
• 数据预嵌入：后端返回页面HTML时，将图片列表数据作为全局变量嵌入到页面的script标签中，组件初始化时直接读取该全局变量作为persons的初始值，无需在客户端发起异步请求

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