react如何同步获取useState的最新状态值
更新时间：2024年01月03日 09:08:18 作者：ass_ace
这篇文章主要介绍了react如何同步获取useState的最新状态值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react同步获取useState的最新状态值
新的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);
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧2021-05-05
这篇文章主要介绍了详解react的两种动态改变css样式的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了nodejs和react实现即时通讯简易聊天室功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
目前好像只有table组件有实现表格数据的全选功能,如果说对于list,card,collapse等其他组件来说,需要自己结合checkbox来手动实现全选功能,这篇文章主要介绍了react antd checkbox实现全选、多选功能,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了React控制元素显示隐藏的三种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
作为一个前端开发时刻想着，怎么把自己写的东西，丢到自己的服务器上面，然后展示给别人看。下面我就简单直白的写下，这篇文章主要给大家介绍了关于nginx配置React静态页面的方法教程,需要的朋友可以参考下。2017-11-11
详解React Native开源时间日期选择器组件(react-native-datetime)
本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime)，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
这篇文章主要为大家介绍了React可定制黑暗模式切换开关组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
react-router v6实现权限管理+自动替换页面标题的案例
这篇文章主要介绍了react-router v6实现权限管理+自动替换页面标题,这次项目是有三种权限，分别是用户，商家以及管理员，这次写的权限管理是高级权限能访问低级权限的所有页面，但是低级权限不能访问高级权限的页面，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了antd upload上传如何获取文件宽高问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
最新评论