React自定義hooks同步獲取useState的最新狀態(tài)值方式
更新時間：2024年03月13日 09:45:37 作者：區(qū)塊鏈（Web3）開發(fā)工程師
這篇文章主要介紹了React自定義hooks同步獲取useState的最新狀態(tài)值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
背景
- 不使用hook時，我們可以在setState回調(diào)函數(shù)獲取最新值
- 使用react hook時，最新的值只能在useEffect里面獲取
- 但我們有時候的業(yè)務(wù)場景需要我們同步拿到變量的最新變化值，以便做下一步操作；
- 這時我們可以封裝一個hook通過結(jié)合useRef通過回調(diào)函數(shù)來拿到最新狀態(tài)值。
代碼
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);
})總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React hook 'useState' is calle
這篇文章主要為大家介紹了React hook 'useState' is called conditionally報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本篇文章主要介紹了React應(yīng)用中使用Bootstrap的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本篇文章主要介紹了react-native fetch的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Taro?React自定義TabBar使用useContext解決底部選中異常
這篇文章主要為大家介紹了Taro?React底部自定義TabBar使用React?useContext解決底部選中異常(需要點兩次才能選中的問題)示例詳解，有需要的朋友可以借鑒參考下2023-08-08
聊聊ant?design?charts?獲取后端接口數(shù)據(jù)展示問題
今天在做項目的時候遇到幾個讓我很頭疼的問題，一個是通過后端接口成功訪問并又返回數(shù)據(jù)，但拿不到數(shù)據(jù)值。其二是直接修改state中的data，console中數(shù)組發(fā)生變化但任然數(shù)據(jù)未顯示，這篇文章主要介紹了ant?design?charts?獲取后端接口數(shù)據(jù)展示,需要的朋友可以參考下2022-05-05
這篇文章主要為大家介紹了Input標簽的自動拼寫檢查功能去除實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
在create-react-app中使用css modules的示例代碼
這篇文章主要介紹了在create-react-app中使用css modules的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家介紹了create-react-app常用自定義配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
React需要自己開發(fā)支持插槽功能，原理：父組件組件中寫入的HTML，可以傳入子組件的props中，這篇文章主要介紹了React從插槽、路由、redux的詳細過程,需要的朋友可以參考下2022-10-10