首次点击按钮时React State未更新，如何获取预期响应？

你的核心问题是axios请求属于异步操作，在fetchData里调用createLeagueReq后立刻判断leagueResponse时，API请求还未完成，setLeagueCreateResponse还没执行，leagueResponse仍为初始值（undefined或null），因此必然走到else分支设置"bye"。

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

方法1：让异步请求返回Promise，用async/await等待结果 #

修改请求函数使其返回Promise，然后在触发函数中用await等待请求完成，直接在请求成功后处理后续逻辑：

// 修改createLeagueReq，返回axios请求的Promise
const createLeagueReq = (startTimeInMillis, createLeaguePath) => {
  return axios.post(createLeaguePath, {
    name: leagueName,
    displayName: leagueDisplayName,
    startTime: startTimeInMillis,
  });
};

// 将fetchData改为async函数
const fetchData = async () => {
  const startTimeInMillis = new Date(startTime).getTime();
  console.log("start time to Millis", startTimeInMillis);
  const createLeaguePath = `${defaultUrl}${createLeagueUrl}`;
  console.log("createLeagueUrl", createLeagueUrl);

  try {
    const response = await createLeagueReq(startTimeInMillis, createLeaguePath);
    if (response !== null) {
      const leagueData = response.data;
      setLeagueCreateResponse(leagueData);
      // 直接在这里处理后续逻辑，无需等待state更新
      const leagueId = leagueData.result.id;
      console.log("league id", leagueId);
      setOkResponse("hello");
    } else {
      setOkResponse("bye");
    }
  } catch (error) {
    // 处理请求失败的情况
    console.error("创建联赛请求失败", error);
    setOkResponse("bye");
  }
};

方法2：用useEffect监听State变化处理后续逻辑 #

如果不想修改请求函数结构，可以通过useEffect监听leagueCreateResponse的变化，当它更新时再执行后续逻辑：

const createLeagueReq = (startTimeInMillis, createLeaguePath) => {
  axios.post(createLeaguePath, {
    name: leagueName,
    displayName: leagueDisplayName,
    startTime: startTimeInMillis,
  })
  .then((response) => {
    if(response !== null){
      setLeagueCreateResponse(response.data);
    }
  })
  .catch(error => {
    console.error("请求失败", error);
    setOkResponse("bye");
  });
};

const fetchData = () => {
  const startTimeInMillis = new Date(startTime).getTime();
  console.log("start time to Millis", startTimeInMillis);
  const createLeaguePath = `${defaultUrl}${createLeagueUrl}`;
  console.log("createLeagueUrl", createLeagueUrl);
  createLeagueReq(startTimeInMillis, createLeaguePath);
};

// 监听leagueCreateResponse的变化，仅当它更新时执行逻辑
useEffect(() => {
  if (leagueCreateResponse !== null && leagueCreateResponse.result?.id) {
    console.log("league id", leagueCreateResponse.result.id);
    setOkResponse("hello");
  }
}, [leagueCreateResponse]); // 仅依赖leagueCreateResponse，不会导致持续渲染

补充说明 #

• 函数组件的useState setter没有回调参数（类组件setState才有），所以你之前尝试的setter回调是无效的。
• 使用useRef无法直接解决UI更新问题，因为ref变化不会触发组件渲染。
• 之前用useEffect导致持续渲染，大概率是依赖项设置错误，上述方法仅依赖leagueCreateResponse，只有当它变化时才会执行，不会无限循环。

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