useState实现回调

丶酸酸

已于 2022-03-07 22:45:54 修改

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

于 2022-03-07 22:35:06 首次发布

本文链接：https://blog.youkuaiyun.com/a82048195/article/details/123341681

react 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了在从类组件迁移到函数式组件时，如何在React的useState中实现回调功能。由于useState的 setState 不再提供回调，文章介绍了两种替代方案：1) 使用useEffect监听状态变化以实现回调；2) 通过Promise来模拟回调效果，以在状态更新后获取最新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useState实现"回调"

团队最近从类组件转向函数式组件，遇到了一个问题就是无法在useState中设置回调方法。

react hook，官方将setState移除了回调方法，由于setState是异步方法，没办法直接在set后拿到最新的数据，所以我们可以通过以下两种方式来拿到更新后的值。

useEffect实现

const [count, setCount] = useState(0);

const addCount = () => {
   setCount(count+1);
};

useEffect(() => {
   console.log(count);
   function(){
   ....
   }
}, [count])

通过useEffect可以监听count的变化，来实现’回调’方法。

Promise实现

const [count, setCount] = useState(0);

const addCount = () => {
    new Promise((resolve) => {
        setCount((num) => {
            resolve(num + 1);
            return num + 1;
        });
    }).then(res => {
        console.log(res);
        ...
    });
};