javascript 调用异步函数后更新useState变量[重复]

ifmq2ha2  于 2022-12-28  发布在  Java
关注(0)|答案(1)|浏览(120)
    • 此问题在此处已有答案**:

The useState set method is not reflecting a change immediately(16个答案)
20小时前关门了。
我有一个函数,它调用这样的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的数据。我该怎么解决这个问题?
我在这里尝试了其他主题,但它们似乎对我没有帮助,如果不是这样,请纠正我

enxuqcxy

enxuqcxy1#

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

const [data,setData] = useState([]);

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

这将修复异步流错误。

相关问题