脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React自定义hooks同步获取useState最新状态值

React自定义hooks同步获取useState的最新状态值方式

 更新时间：2024年03月13日 09:45:37   作者：区块链（Web3）开发工程师  
这篇文章主要介绍了React自定义hooks同步获取useState的最新状态值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

背景

  • 不使用hook时，我们可以在setState回调函数获取最新值
  • 使用react hook时，最新的值只能在useEffect里面获取
  • 但我们有时候的业务场景需要我们同步拿到变量的最新变化值，以便做下一步操作；
  • 这时我们可以封装一个hook通过结合useRef通过回调函数来拿到最新状态值。

代码

import { useEffect, useRef, useState } from 'react';
 
/**
 * 自定义 useState
 * @param state
 * @returns
 */
const useSyncState: any = (state: any) => {
  const cbRef: { current: any } = useRef();
  const [data, setData] = useState(state);
 
  useEffect(() => {
    cbRef.current && cbRef.current(data);
  }, [data]);
 
  return [
    data,
    (val: any, callback: any) => {
      cbRef.current = callback;
      setData(val);
    },
  ];
};
 
export default useSyncState;

使用

const [data,setData] = useSyncState(0);
 
setData(1, function (data) {
    console.log("我是最新的值：", data);
})

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • React hook 'useState' is called conditionally报错解决

    React hook 'useState' is calle

    这篇文章主要为大家介绍了React hook 'useState' is called conditionally报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React应用中使用Bootstrap的方法

    React应用中使用Bootstrap的方法

    本篇文章主要介绍了React应用中使用Bootstrap的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • react-native fetch的具体使用方法

    react-native fetch的具体使用方法

    本篇文章主要介绍了react-native fetch的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Taro React自定义TabBar使用useContext解决底部选中异常

    Taro React自定义TabBar使用useContext解决底部选中异常

    这篇文章主要为大家介绍了Taro React底部自定义TabBar使用React useContext解决底部选中异常(需要点两次才能选中的问题)示例详解，有需要的朋友可以借鉴参考下
    2023-08-08
  • 聊聊ant design charts 获取后端接口数据展示问题

    聊聊ant design charts 获取后端接口数据展示问题

    今天在做项目的时候遇到几个让我很头疼的问题，一个是通过后端接口成功访问并又返回数据，但拿不到数据值。其二是直接修改state中的data，console中数组发生变化但任然数据未显示，这篇文章主要介绍了ant design charts 获取后端接口数据展示,需要的朋友可以参考下
    2022-05-05
  • Input标签自动校验功能去除实现

    Input标签自动校验功能去除实现

    这篇文章主要为大家介绍了Input标签的自动拼写检查功能去除实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • React-Hooks之useImperativeHandler使用介绍

    React-Hooks之useImperativeHandler使用介绍

    这篇文章主要为大家介绍了React-Hooks之useImperativeHandler使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • 在create-react-app中使用css modules的示例代码

    在create-react-app中使用css modules的示例代码

    这篇文章主要介绍了在create-react-app中使用css modules的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • create-react-app常用自定义配置教程示例

    create-react-app常用自定义配置教程示例

    这篇文章主要为大家介绍了create-react-app常用自定义配置教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • React从插槽、路由、redux的详细过程

    React从插槽、路由、redux的详细过程

    React需要自己开发支持插槽功能，原理：父组件组件中写入的HTML，可以传入子组件的props中，这篇文章主要介绍了React从插槽、路由、redux的详细过程,需要的朋友可以参考下
    2022-10-10

最新评论