在 React App 中使用带有 axios 的异步等待函数的未定义状态

Question

我正在创建一个基本的天气应用程序，它从 Openweathermap API 获取数据并将其显示在页面上。

我不明白为什么 console.log(data) 在我的控制台中显示未定义？

   const [data, setData] = useState()

   useEffect(() => {

      const fetchData = async () => {
         const res = await axios.get(url)
         setData(res.data)
         console.log(data)
      }

      fetchData()
   }, [])

console.log(data) 是否应该只在函数的 await 部分被解析后运行？

数据确实已成功检索并正确显示在页面上，因为如果定义了数据，我只会呈现 html：

return (
         {data && (
            <div className="weather">
                //content goes here
            <div/>

我只是不明白为什么它在控制台中显示为未定义？

提前致谢！

Answer 1

setData 是异步的。它不会立即更新数据，因此您不会立即看到结果。

您可以使用useEffect 来检测状态更新后的变化

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