调用async函数后更新useState变量

Question

我有一个这样调用API的函数:

static async getReport(date) {
const url = reportUrl + date
const method = 'GET'
try {
return await axios({
url,
method: method,
responseType: 'blob'
})
} catch (error) {
return error
}
}

在我的组件中，我像这样使用这个函数:

async function handleClick() {
const response = await ReportService.getData(date)
if (response instanceof AxiosError) {
setSuccess(false)
handleClickSuccess()
} else {
setData(response)
drawTable()
}
}

'setSuccess'和'handleClickSuccess'函数并不重要，但在成功调用api的情况下，我从'setData'函数的响应中设置数据，这是'useState'钩子。然后我调用函数'drawTable'，它根据'setData'钩子的状态绘制一个表。问题是，到目前为止，'drawTable'函数被称为'setData'钩子还没有从调用我的api的数据填充。我该如何解决这个问题?

我尝试了其他话题，但他们似乎没有帮助我，纠正我，如果这不是真的

Answer 1

如您所知，useState钩子的set函数需要一些时间来更新状态。这里不是在async函数中调用这个drawtable函数，而是添加一个useEffect并添加数据的依赖性。

const [data,setData] = useState([]);
useEffect(()=>{
if(data.length > 0){
drawTable();
}
},[data,drawTable])

这将修复异步流错误。