在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]);
如果有什么问题,欢迎评论区指出,大家一起进步,谢谢。