在承诺中反应useState setter不更新[重复]答案

【问题标题】：React useState setter in promise not updating [duplicate]在承诺中反应useState setter不更新[重复]
【发布时间】：2020-10-30 12:57:26
【问题描述】：

我正在尝试更新 axios 响应中的 usestate 计数，但它无法正常工作。

let [ validationCount , setValidationCount ] = useState(0);


function getValidationResponse(validationUrl:string, validationKey:string)
    {
           axios.get("https://test.com/health")
                .then(res => {
                    setValidationCount(validationCount+1);
                }).catch(err => {
                
            });
            
        return "";
    }

上述函数被调用两次，但验证计数始终为 1。

我有什么遗漏吗？

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案1】：

根据getValidationResponse 的使用方式，我怀疑闭包可能存在问题，将validationCount 捕获为0 导致更新后的值始终为1。

尝试使用functional updates，它将根据之前的值更新validationCount 的值。

setValidationCount(prevCount => prevCount + 1);

【讨论】：

谢谢，我们怎样才能对对象做同样的事情呢？ let [ validationState, setValidationState ] = useState({} as { [key:string]:string});
setValidationState(prev => ({ ...prev, key1: value1 }))

【解决方案2】：

这是一个闭包问题，你可以看到它在行动here，基本上，如果你慢慢点击它，它就可以正常工作，如果你在上一次更新结束之前多次点击它，你创建了validationCount的函数仍然没有更新。记住 setState 是一个异步函数总是好的。

【讨论】：

更多信息可以参考mdn。