网站建设合同封面网络营销是指
在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(()=>{// 每次 更新 把值 复制给 modelStatusRefmodelStatusRef.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]);