useState回調函數


在看的小朋友,新的react hook寫法,官方默認setState方法移除了回調函數,推薦使用useEffect,但是改動的數據過多還是有很多問題。so,我在useState基礎上擴展了回調函數功能,就可以像以前類寫法一樣傳遞回調方法啦。

話不多說上代碼

import {useEffect, useState, useRef} from "react";
 
 
function useCallbackState (od) {
    const cbRef = useRef();
    const [data, setData] = useState(od);
 
    useEffect(() => {
        cbRef.current && cbRef.current(data);
    }, [data]);
 
    return [data, function (d, callback) {
        cbRef.current = callback;
        setData(d);
    }];
}
 
export {useCallbackState};

使用的時候像平常一樣, 回調函數可以傳可以不傳遞 

const [data,setData] = useCallbackState({});
 
setData({}, function (data) {
    console.log("啦啦啦,我是回調方法", data);
})

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM