axios获取fetch后，useState保持未定义状态

Question

我已经将代码缩减为所需的部分。

getArticleFromApi被调用onSubmit(apiData运行良好(

我的问题是console.log在第一次单击提交后返回undefined。

如果几秒钟后我再次击中它，一切都会如预期一样。

我的问题是如何让JS等到文章不再是未定义的。直到设置状态项目。(延迟执行代码(

import {useState} from "react";
import axios from "axios";
const [apiData, setApiData] = useState();
const [article, setArticle] = useState();
const getArticleFromApi = () => {
axios.get('http://localhost:8080/api/articles/' + apiData.brand_id + '/' + apiData.article_number)
.catch(err => console.log(err))
.then(resp => {
setArticle(resp.data.data)
})
console.log(article)
}

这是我的第一个问题，所以对我宽容一点。告诉我我能不能改进什么。

Answer 1

由于setState是一个异步函数，因此不能在setState之后立即获得新更改的状态。

查看有关此主题的官方文档。

记录状态变化的一种方法是用article设置useEffect函数。

const getArticleFromApi = () => {
axios.get('http://localhost:8080/api/articles/' + apiData.brand_id + '/' + apiData.article_number)
.catch(err => console.log(err))
.then(resp => {
setArticle(resp.data.data)
})
}
useEffect(() => {
console.log(article)
}, [article])

每次article更改时，useEffect都会运行回调函数，该函数会记录最新的article。

Answer 2

import {useState} from "react";
import axios from "axios";
const [apiData, setApiData] = useState();
const [article, setArticle] = useState();
const [extra,setExtra]=useState(0) // add this line
const getArticleFromApi = () => {
axios.get('http://localhost:8080/api/articles/' + apiData.brand_id + '/' + apiData.article_number)
.catch(err => console.log(err))
.then(resp => {
setArticle(resp.data.data)
setExtra(extra+1)  // add this line

})
console.log(article)
}

useEffect(()=>{
getArticleFromApi()
},[])