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);
})

 

  • 8
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 React 中,函数组件可以使用 `useState` 钩子来定义状态。当我们更新状态时,可以使用回调函数来处理状态更新后的副作用。 下面是一个例子: ``` import React, { useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0); const handleButtonClick = () => { setCount(count + 1, () => { // 在状态更新后执行的回调函数 console.log('count更新为', count); }); }; return ( <div> <p>Count: {count}</p> <button onClick={handleButtonClick}>增加</button> </div> ); } ``` 在这个例子中,我们通过 `useState` 钩子定义了一个状态 `count`,并使用 `setCount` 函数来更新它。`setCount` 函数接受两个参数:新的状态值和一个可选的回调函数。我们可以在回调函数中对状态更新后的结果进行处理。 在上面的例子中,我们使用了一个箭头函数来定义 `handleButtonClick`,它会在按钮被点击时被调用。在这个函数中,我们使用 `setCount` 函数来增加 `count` 的值,并在第二个参数中传入一个回调函数,用来在状态更新后输出 `count` 的值。 需要注意的是,由于 `setState` 函数是异步执行的,所以在回调函数中获取到的状态值可能不是最新的。如果需要在回调函数中使用最新的状态值,可以使用函数式更新的方式来更新状态,如下所示: ``` const handleButtonClick = () => { setCount(prevCount => prevCount + 1, () => { console.log('count更新为', count); }); }; ``` 在这个例子中,我们使用了函数式更新的方式来更新状态,`setCount` 函数的第一个参数是一个函数,接受当前状态值作为参数,并返回新的状态值。这样,我们就可以在回调函数中获取到最新的状态值了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值