React拆分函数后，如何解决数据获取时状态未就绪问题？

核心问题 #

1. React状态更新是异步的：你用await setFetchedLink()完全无效，因为React的setState并不返回Promise，不会等待状态更新完成。所以在shortenLink里调用await fetchShortenedLink()后，fetchedLink还是旧值，导致添加到linkArr的对象缺少正确的短链接。
2. 未处理校验结果：checkLink()返回了校验状态，但shortenLink里没有根据这个结果决定是否继续执行后续逻辑，就算链接不合法，也会触发接口调用。

修正后的代码实现 #

const checkLink = () => {
  if (!nextLink) {
    setErrorMsg("Please add link");
    return false;
  } else if (!nextLink.match(linkRegex)) {
    setErrorMsg("That's not a link");
    return false;
  } else {
    setErrorMsg(""); // 校验通过时清空错误信息
    return true;
  }
};

// 修改fetch函数，直接返回获取到的短链接，不依赖state传递数据
const fetchShortenedLink = async () => {
  setIsLoading(true);
  try {
    const response = await fetch(
      `https://api.shrtco.de/v2/shorten?url=${nextLink}`
    );
    if (!response.ok) {
      throw new Error(`An error has occured: ${response.status}`);
    }
    const data = await response.json();
    return data.result.short_link; // 将短链接返回给调用者
  } catch (err) {
    setErrorMsg(err.message);
    return null; // 出错时返回null标记失败
  } finally {
    setIsLoading(false); // 无论成功失败，都结束加载状态
  }
};

const shortenLink = async () => {
  // 先执行校验，不通过直接终止流程
  const isValid = checkLink();
  if (!isValid) return;

  const shortLink = await fetchShortenedLink();
  // 如果接口调用失败，不执行后续添加逻辑
  if (!shortLink) return;

  // 直接用接口返回的shortLink更新数组，跳过异步state的依赖
  setLinkArr((prev) => [
    ...prev,
    {
      id: prev.length === 0 ? 1 : prev[prev.length - 1].id + 1,
      long: nextLink,
      short: shortLink,
    },
  ]);
  setNextLink("");
  scrollToLink();
};

关键优化点 #

• 跳过异步state传递数据：直接从异步函数返回结果，彻底避免状态更新滞后的问题。
• 严格校验拦截：校验不通过时直接终止后续逻辑，避免无效的接口调用。
• 统一错误处理：用try/catch包裹接口请求，确保错误信息正确设置，同时加载状态一定会被重置。
• 清理残留错误：校验通过时清空之前的错误提示，避免界面残留错误信息。

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