React函数组件中setState更新状态后如何正确执行后续逻辑

核心疑问解答 #

你担心的useState异步更新导致isLoading未生效就发起请求的问题不存在，你当前的代码写法已经符合逻辑：
setIsLoading(true)调用后，React会调度状态更新，后续构造请求参数的同步代码执行耗时极短，等到真正发起网络IO请求时，React已经完成了状态更新和页面重渲染，加载指示器会正常展示，用户完全感知不到时差，不需要额外调整调用顺序。

代码可优化点 #

1. 补全useEffect依赖 #

当前useEffect依赖数组为空，当路由参数username发生变化时不会重新拉取对应用户信息，需要将username加入依赖：

useEffect(() => {
  fetchUserDetails(username);
}, [username]);

2. 简化loading状态重置逻辑 #

无需在try和catch分支分别写setIsLoading(false)，放到finally块统一处理即可，避免分支遗漏：

const fetchUserDetails = async (username) => {
  setIsLoading(true);
  try {
    const userRes = await API.graphql({
      query: queries.getUser,
      variables: { username },
    });
    if (userRes.error) {
      throw new Error({ cause: userRes.error });
    }
    setUser(userRes.data.getUser);
  } catch (error) {
    console.error(error);
    // 跳转到错误页逻辑
  } finally {
    setIsLoading(false);
  }
};

3. 新增请求取消逻辑避免内存泄漏 #

如果组件在请求返回前被卸载，此时调用setUser/setIsLoading会触发React内存泄漏警告，可以通过AbortController处理：

useEffect(() => {
  const controller = new AbortController();

  const fetchUserDetails = async (username) => {
    setIsLoading(true);
    try {
      const userRes = await API.graphql({
        query: queries.getUser,
        variables: { username },
        signal: controller.signal // 若你的GraphQL客户端支持中断请求则传入该参数
      });
      if (userRes.error) {
        throw new Error({ cause: userRes.error });
      }
      setUser(userRes.data.getUser);
    } catch (error) {
      // 忽略请求主动中断的报错
      if (error.name !== 'AbortError') {
        console.error(error);
        // 跳转到错误页逻辑
      }
    } finally {
      if (!controller.signal.aborted) {
        setIsLoading(false);
      }
    }
  };

  fetchUserDetails(username);
  // 组件卸载时主动中断请求
  return () => controller.abort();
}, [username]);

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