其他分享
首页 > 其他分享> > 同步获取useState的最新状态值

同步获取useState的最新状态值

作者:互联网

欢迎关注前端早茶,与广东靓仔携手共同进阶

前端早茶专注前端,一起结伴同行,紧跟业界发展步伐~

公众号作者:广东靓仔

背景

新的react hook写法,官方默认setState方法移除了回调函数,但我们有时候的业务场景需要我们同步拿到变量的最新变化值,以便做下一步操作,这时我们可以封装一个hook通过结合useref通过回调函数来拿到最新状态值。

 

Demo代码如下

import {useEffect, useState, useRef} from "react";


function useCallbackState (state) {
const cbRef = useRef();
const [data, setData] = useState(state);

useEffect(() => {
cbRef.current && cbRef.current(data);
}, [data]);

return [data, function (val, callback) {
cbRef.current = callback;
setData(val);
}];
}

export {useCallbackState};

 

使用的时候像平常一样, 回调函数可以传可以不传递

 

const [data,setData] = useCallbackState({});

setData({}, function (data) {
console.log("广东靓仔", data);
})

 

 

欢迎关注前端早茶,与广东靓仔携手共同进阶

前端早茶专注前端,一起结伴同行,紧跟业界发展步伐~

公众号作者:广东靓仔

标签:同步,前端,靓仔,useState,状态值,cbRef,早茶,data,setData
来源: https://www.cnblogs.com/cczlovexw/p/15342760.html