在ReactJS中获取axios函数返回值赋值时变量为undefined如何解决

• 你遇到的undefined问题本质是axios是异步请求，getUsername函数执行的时候，axios的post请求还没拿到返回结果，.then里的赋值逻辑还没运行，函数就已经把初始值''return出去了，所以u1拿到的永远是未被赋值的初始值。

方案1：使用async/await改写异步逻辑 #

把getUsername改成异步函数，直接返回请求结果，调用时用await取值：

// 改写异步函数
async function getUsername(userid){
  try {
    const res = await axios.post('/api/getuserdata' , {_id:userid})
    const userdata = res.data[0]
    return userdata.username
  } catch(err) {
    console.log(err)
    return '' // 异常时返回默认值
  }
}

// 调用时必须用await（外层要包裹async函数）
async function fetchData() {
  const u1 = await getUsername(id)
  console.log(u1) // 这里就能拿到正确值
}
fetchData()

方案2：回调函数写法（兼容旧版语法场景） #

如果你不想用async/await语法，也可以通过回调函数接收异步返回值：

function getUsername(userid, callback){
  axios.post('/api/getuserdata' , {_id:userid}).then(res=>{
    const userdata = res.data[0]
    callback(userdata.username)
  }).catch(err=>{
    console.log(err)
    callback('')
  })
}
// 调用时传入回调函数接收值
getUsername(id, (u1) => {
  console.log(u1) // 这里拿到正确值
})

方案3：React组件内配合Hooks使用（React场景最优解） #

如果你是在React组件里调用这个方法，不要直接赋值给普通变量，要存到state里才能触发组件重新渲染，视图上才能正确展示：

import { useState, useEffect } from 'react'
import axios from 'axios'

function YourComponent({id}) {
  const [username, setUsername] = useState('')

  useEffect(() => {
    // 把异步请求放在useEffect里触发
    const getUsername = async () => {
      try {
        const res = await axios.post('/api/getuserdata' , {_id: id})
        const userdata = res.data[0]
        setUsername(userdata.username)
      } catch(err) {
        console.log(err)
      }
    }
    getUsername()
  }, [id]) // id变化时自动重新请求

  // 直接在jsx里使用username即可
  return <div>用户名：{username}</div>
}

• 所有异步请求的返回值都不能直接同步接收，必须通过await、.then回调或者状态管理的方式获取
• React中不要用普通变量存储需要渲染的异步数据，普通变量更新不会触发组件重新渲染，必须用useState存储

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