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

在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]);

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