React中获取数据时setState无法正确更新isLoading状态的问题求助

我来帮你拆解下代码里的问题，这其实是React状态更新里常见的闭包陷阱和执行顺序问题导致的：

问题根源 #

1. 闭包捕获的状态快照过期
   你的useEffect依赖数组是空的[]，这意味着它只会在组件挂载时执行一次。此时内部捕获的user状态是初始化时的快照，当异步请求完成后，setUser({...user, ...retrievedUser})里的user还是初始的空对象，无法正确合并最新的状态，导致更新不生效。

2. 同步代码抢先覆盖状态
   最后一行setUser({...user, isLoading: false})是同步代码，会在异步函数的await之前就执行。也就是说，你刚把isLoading设为true，紧接着就被同步代码改成false了，加载状态根本来不及触发组件更新。

3. 变量名笔误
   代码里获取了userId，但请求数据时用的是leadId，这会导致请求参数错误，根本拿不到用户数据，进一步加剧状态更新异常。

修正后的代码 #

const App = () => { 
  const [user, setUser] = useState({ 
    name: "", 
    organisationName: "", 
    id: "", 
    isLoading: false, 
  }); 

  useEffect(() => { 
    // 把异步逻辑封装成单独的async函数
    const fetchUser = async () => {
      const userId = getUserIdFromParams(); 
      if (!userId) return; // 没有userId直接退出

      // 使用函数式更新，基于最新状态修改
      setUser(prevUser => ({...prevUser, isLoading: true})); 
      
      try {
        // 修正变量名：用userId代替leadId
        const retrievedUser = await getLeadFromDatabase(userId); 
        
        if (retrievedUser) {
          // 合并用户数据并关闭加载状态
          setUser(prevUser => ({...prevUser, ...retrievedUser, isLoading: false}));
        } else {
          // 处理用户不存在的情况
          setUser(prevUser => ({...prevUser, isLoading: false}));
        }
      } catch (error) {
        // 处理请求失败的情况，避免加载状态一直挂着
        console.error('获取用户数据失败:', error);
        setUser(prevUser => ({...prevUser, isLoading: false}));
      }
    };

    fetchUser();
  }, []); 

  // 组件其余渲染逻辑...
};

关键优化点 #

• 函数式状态更新：用setUser(prevUser => ...)代替直接展开user，这样每次更新都能拿到最新的状态，彻底避开闭包陷阱。
• 异步逻辑封装与错误处理：把异步请求放进单独的async函数，加上try/catch确保无论请求成功还是失败，isLoading最终都会被设为false，不会出现加载状态一直显示的情况。
• 修正变量名错误：统一使用userId作为请求参数，保证数据请求能正常触发。
• 调整执行顺序：只有在确认存在userId后才执行后续逻辑，避免无效操作。

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