React Hooks如何实现类组件setState队列顺序执行的加载数据逻辑

useState返回的状态更新函数（比如示例中的setIsLoading）仅支持两种入参：新的状态值，或者接收旧状态返回新状态的同步更新函数，没有类组件setState的第二个回调参数，也不支持直接传入异步函数作为入参，你之前的写法不符合useState的使用规范，所以无法正常运行。

场景1：事件触发请求（比如点击按钮刷新数据） #

import { useState } from 'react';

function YourComponent() {
  const [isLoading, setIsLoading] = useState(false);
  const [dataToRender, setDataToRender] = useState([]);

  // 异步请求处理函数
  const handleFetchData = async () => {
    setIsLoading(true);
    const data = await fetchData();
    setDataToRender(data);
    setIsLoading(false);
  };

  if (isLoading) return <p>loading...</p>;

  return (
    <div>
      <button onClick={handleFetchData}>加载数据</button>
      {dataToRender.map(item => (
        // 你的列表项渲染逻辑
        <div key={item.id}>{item.content}</div>
      ))}
    </div>
  );
}

场景2：组件挂载时自动请求数据 #

import { useState, useEffect } from 'react';

function YourComponent() {
  const [isLoading, setIsLoading] = useState(false);
  const [dataToRender, setDataToRender] = useState([]);

  useEffect(() => {
    let isUnmounted = false;
    // 不要直接给useEffect回调加async，需在内部定义异步函数
    const loadData = async () => {
      setIsLoading(true);
      const data = await fetchData();
      if (!isUnmounted) {
        setDataToRender(data);
        setIsLoading(false);
      }
    };
    loadData();
    // 清理逻辑：避免组件卸载后更新状态引发的内存泄漏警告
    return () => {
      isUnmounted = true;
    };
  }, []); // 空依赖数组代表逻辑仅在组件首次挂载时执行一次

  if (isLoading) return <p>loading...</p>;

  return dataToRender.map(item => (
    // 你的列表项渲染逻辑
    <div key={item.id}>{item.content}</div>
  ));
}

• 类组件的setState第二个回调是状态更新并完成重渲染后执行的钩子，Hooks体系下没有对应的API，这类状态更新后的副作用逻辑统一通过useEffect监听对应状态变化实现，本场景下因为异步逻辑的执行顺序本身是线性的，不需要额外监听状态也能保证执行顺序符合预期。
• React 18及以上版本支持自动批处理，同一个异步任务回调中的多次状态更新会合并为一次重渲染，比如请求返回后的setDataToRender和setIsLoading(false)只会触发一次重渲染，性能优于类组件的默认更新逻辑。
• useEffect的回调函数不能直接定义为async函数，因为useEffect期望返回值是清理函数，async函数返回的是Promise，会导致清理逻辑异常，所以需要在useEffect内部定义异步函数再调用。

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