在React中，我如何进行单个api调用，将结果设置为状态变量并显示它

Question

我正在编程一个react应用程序，需要进行一个异步api调用，将结果保存到状态变量中并显示结果。我使用的是一个axios实例，其中api调用的响应是一个嵌套对象。例如：

{
kanji:
{character: "", stroke:""},
quote: "string"
}

到目前为止，我已经有了以下代码，可以在其中成功地console.log homeData对象。然而，我得到了错误："TypeError:homeData未定义"。

const Home = () =>{
const [homeData, setHomeData] = useState({}) 
const getHomeData = async()=>{
instance.get("/data")
.then(res =>{
setHomeData(res.data)
})
.catch(error =>{
console.log(error)
})
}

useEffect(()=>{
getHomeData()
}, [])
console.log(homeData)

return(
<>
<p>{homeData}<p>
</>
)
}

这看起来像是一个承诺问题，但我不知道如何解决。感谢您提前提供的帮助。

Answer 1

这不是一个承诺问题，它必须与生命周期方法的运行顺序有关。useEffect在组件渲染后运行。这意味着当组件首次渲染时，homeData是一个空对象。homeData将出现在第二个渲染中。以下代码首先检查homeData是否存在，然后如果存在，则显示汉字字符。还要注意，你不能只在dom中显示一个原始对象，所以你必须访问homeData by属性才能显示

const Home = () =>{
const [homeData, setHomeData] = useState({}) 
const getHomeData = async()=>{
instance.get("/data")
.then(res =>{
setHomeData(res.data)
})
.catch(error =>{
console.log(error)
})
}

useEffect(()=>{
getHomeData()
}, [])
console.log(homeData)

return(
<>
<p>{homeData && homeData.kanji.character}<p>
</>
)
}