同步獲取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);
})

 

 

歡迎關注前端早茶，與廣東靚仔攜手共同進階

前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~

公眾號作者：廣東靚仔