React中能否在useState中使用异步调用函数？

首先明确：useState无法直接适配异步的初始值函数。因为useState接收的初始值要么是具体值，要么是同步的初始化函数——异步函数执行后返回的是Promise对象，而不是你要的实际数据，这就是代码失效的原因。

正确的实现方式：用useEffect处理异步请求 #

组件挂载后，通过useEffect发起异步请求，拿到数据后再更新状态。代码示例如下：

import React, { useState, useEffect } from "react";
import axios from "axios"; // 确保已安装并导入axios

function LoadPage() {
  const [valueOne, setvalueOne] = useState(null); // 初始值设为null或其他占位符

  // 组件挂载时执行一次异步请求
  useEffect(() => {
    async function getValueOne() {
      try {
        const res = await axios.get(`${getBaseUrl()}/One/GetValueOfOne`);
        setvalueOne(res.data); // 请求成功后更新状态
      } catch (err) {
        console.error("获取数据失败:", err);
        // 可以在这里处理错误，比如设置默认值
        // setvalueOne("默认值");
      }
    }

    getValueOne();
  }, []); // 空依赖数组表示只在组件挂载时执行

  // 可以根据状态渲染不同内容，比如加载中提示
  if (valueOne === null) {
    return <div>加载中...</div>;
  }

  return <div>{valueOne}</div>;
}

额外优化点 #

• 你的原axios写法可以简化：直接await请求结果，不用嵌套.then，代码更清晰。
• 加上错误捕获，避免请求失败导致组件异常。
• 初始值设为null或""，配合加载状态提示，提升用户体验。

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