React hooks 不能拿到最新的的setState的值

悠悠 2022-12-15 06:13 119阅读 0赞

**此文章转载自：**[https://blog.csdn.net/hl971115/article/details/104564923?utm\_medium=distribute.pc\_aggpage\_search\_result.none-task-blog-2~all~first\_rank\_v2~rank\_v25-5-104564923.nonecase&utm\_term=hooks%E5%87%BD%E6%95%B0%E8%8E%B7%E5%8F%96%E4%B8%8D%E5%88%B0%E6%96%B0%E6%95%B0%E6%8D%AE&spm=1000.2123.3001.4430][https_blog.csdn.net_hl971115_article_details_104564923_utm_medium_distribute.pc_aggpage_search_result.none-task-blog-2_all_first_rank_v2_rank_v25-5-104564923.nonecase_utm_term_hooks_E5_87_BD_E6_95_B0_E8_8E_B7_E5_8F_96_E4_B8_8D_E5_88_B0_E6_96_B0_E6_95_B0_E6_8D_AE_spm_1000.2123.3001.4430] **且****仅作为学习参考 **

在class中,如果 我们想要拿到setState 最新的值,去调用api,直接通过this.setState的回调函数就可以了

this.setState({
    	latestValue: "我是最新的"
    },()=>{
    	this.callApi(latestValue);   //这里就会拿到最新的值
    });

然后我们在react hooks中setState 确实拿到上一次的缓存,是因为，函数在每次渲染时也是独立的。这就是 **Capture Value** 特性，后面遇到这种情况就不会一一展开，只描述为 “此处拥有 **Capture Value** 特性”。

const [modelStatus, setModelStatus] =useState("");
    
    function statusHandleChange(val) {
            setModelStatus(val);
            search();
        }
    
    function search() {
        
    	console.log(modelStatus);   // 这里拿到的值 是上一次的值,不是最新的
    	props.callApi(modelStatus);
    }

解决方法是:

### 第一种: ###

function statusHandleChange(val) {
            setModelStatus(val);
            // 直接把参数的值 传进去 拿到的就是最新的了
            search(val);
        }
    
    function search(value) {
        
    	console.log(value);  
    	props.callApi(value);
    }

### 第二种: ###

const [modelStatus, setModelStatus] =useState("");
    const modelStatusRef = useRef(null);
    
    useEffect(()=>{
    	// 每次 更新 把值 复制给 modelStatusRef
    	modelStatusRef.current = modelStatus;
    }, [modelStatus]); // 依赖的值 等modelStatus 改变了 才出发里面的值
    
    function statusHandleChange(val) {
            setModelStatus(val);
            
            // **设置一个延迟 0毫秒,这个 很重要**
            setTimeout(search, 0);
        }
    
    function search(value) {
    	// 这里的值 就是 拿到最新的值了
        let _modelStatus = modelStatusRef .current;
    	console.log(_modelStatus );  
    	props.callApi(_modelStatus );
    }

### 第三种: (其实第三种方法跟第二种方法差别不大) ###

useEffect(()=>{
               setModelStatus(modelStatus);
       },[modelStatus]);

如果有什么问题,欢迎评论区指出,大家一起进步,谢谢。

[https_blog.csdn.net_hl971115_article_details_104564923_utm_medium_distribute.pc_aggpage_search_result.none-task-blog-2_all_first_rank_v2_rank_v25-5-104564923.nonecase_utm_term_hooks_E5_87_BD_E6_95_B0_E8_8E_B7_E5_8F_96_E4_B8_8D_E5_88_B0_E6_96_B0_E6_95_B0_E6_8D_AE_spm_1000.2123.3001.4430]: https://blog.csdn.net/hl971115/article/details/104564923?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-5-104564923.nonecase&utm_term=hooks%E5%87%BD%E6%95%B0%E8%8E%B7%E5%8F%96%E4%B8%8D%E5%88%B0%E6%96%B0%E6%95%B0%E6%8D%AE&spm=1000.2123.3001.4430