react——同步获取useState的最新状态值

react 专栏收录该内容
18 篇文章 1 订阅

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

代码如下:

import {useEffect, useState, useRef} from "react";
 
 
function useCallbackState1 (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);
})

 

  • 3
    点赞
  • 7
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值