React中使用Axios请求数据返回Promise、user状态为Undefined如何解决？

• 所有async标记的函数默认返回值都是Promise对象，你没有等待Promise执行完成就直接赋值给state，所以拿到的是Pending状态的Promise而非实际接口返回值
• 冗余代码问题：Axios返回的response.data本身就是普通JS对象，不需要再加await解析，这行代码属于冗余逻辑

1. 优化调用层封装代码 #

export const getUserById = async (username) => {
   try {
      const response = await api.fetchUserById(username);
      // 去掉多余的await，response.data不需要异步解析
      return response.data;
   } catch (error) {
      // 建议抛出错误而非直接返回，方便调用层统一捕获异常处理
      throw error;
   }
};

2. 修复组件内useEffect的异步调用逻辑 #

两种常用写法任选其一即可：

写法1：useEffect内写自执行异步函数 #

const [user, setUser] = useState();
const [error, setError] = useState(); // 可选，用来存储接口报错信息
    
useEffect(() => {
  // 自执行async函数
  (async () => {
    try {
      const data = await getUserById(params.username);
      setUser(data);
    } catch (err) {
      setError(err);
      // 此处可添加自定义错误提示逻辑，比如弹出全局toast等
    }
  })()
}, [params.username]) // 注意把params.username加入依赖数组，参数变化时自动重新请求

useEffect(() => {
    console.log("this is user: ", user)
}, [user])

写法2：用Promise的then链式调用 #

useEffect(() => {
    getUserById(params.username)
      .then(data => setUser(data))
      .catch(err => {
        // 错误处理逻辑
        console.error('获取用户信息失败', err)
      })
}, [params.username])

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