React Hooks setState疑问：分段加载数据为何需等待全部请求完成才渲染？

你的问题核心在于，你在同一个异步函数里用await等待剩余数据的获取，这导致虽然已经设置了前30条数据和isLoading为false，但浏览器的重绘被后续的微任务延迟了——React的状态更新虽然被调度，但当前宏任务的微任务队列清空前，浏览器不会进行页面渲染，而fetchMissingData的await会把后续代码放入微任务队列，最终导致第一次状态更新的渲染被推迟到所有异步操作完成后。

下面提供两种可行的解决方案：

方案1：让剩余数据获取在后台独立执行（不阻塞当前流程） #

去掉fetchMissingData前的await，让它在后台自行完成，这样当前的异步函数会提前结束，浏览器能立即拿到渲染前30条数据的机会：

useEffect(() => { 
  (async function () { 
    setIsLoading(true); 
    try { 
      const data = sortById(await fetch('url')); 
      const prep = await prepareData(data, (pageNumber - 1) * elementsPerPage, pageNumber * elementsPerPage); 
      setData(prep); 
      setIsLoading(false); 

      // 去掉await，让剩余数据获取在后台执行，不阻塞当前渲染流程
      fetchMissingData(prep, elementsPerPage)
        .then(backgroundData => {
          setData(backgroundData);
        })
        .catch(err => {
          // 单独处理剩余数据获取失败的情况，不影响已展示的前30条
          console.error('获取剩余数据失败:', err);
        });
    } catch (e) { 
      setError(e); 
      setIsLoading(false); 
    } 
  })(); 
}, [])

方案2：用useEffect监听数据变化触发剩余数据加载 #

这种方式更贴合React Hooks的设计思想，把初始加载和后台加载拆分为两个独立的逻辑，当页面渲染完前30条数据后，自动触发剩余数据的获取：

// 初始加载：获取并准备前30条数据
useEffect(() => { 
  (async function () { 
    setIsLoading(true); 
    try { 
      const data = sortById(await fetch('url')); 
      const prep = await prepareData(data, (pageNumber - 1) * elementsPerPage, pageNumber * elementsPerPage); 
      setData(prep); 
      setIsLoading(false); 
    } catch (e) { 
      setError(e); 
      setIsLoading(false); 
    } 
  })(); 
}, []);

// 监听data状态变化，当data为前30条时触发剩余数据获取
useEffect(() => {
  // 仅当data是前30条且不在加载状态时执行
  if (data.length === elementsPerPage && !isLoading) {
    fetchMissingData(data, elementsPerPage)
      .then(backgroundData => {
        setData(backgroundData);
      })
      .catch(err => {
        console.error('获取剩余数据失败:', err);
      });
  }
}, [data, isLoading, elementsPerPage]);

额外说明 #

• React的状态更新是异步调度的，但浏览器的重绘需要等待当前宏任务的所有微任务执行完毕。如果在同一个async函数里连续await多个异步操作，第一次状态更新的渲染会被推迟到所有await完成后。
• 方案2的优势在于逻辑拆分清晰，更容易维护和调试，也能更好地控制剩余数据加载的触发时机。
• 务必单独处理剩余数据获取失败的情况，避免影响用户已经看到的前30条数据展示。

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