react如何同步獲取useState的最新狀態(tài)值
更新時間：2024年01月03日 09:08:18 作者：ass_ace
這篇文章主要介紹了react如何同步獲取useState的最新狀態(tài)值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
react同步獲取useState的最新狀態(tài)值
新的react hook寫法
官方默認setState方法移除了回調(diào)函數(shù)，但我們有時候的業(yè)務場景需要我們同步拿到變量的最新變化值
以便做下一步操作，這時我們可以封裝一個hook通過結(jié)合useref通過回調(diào)函數(shù)來拿到最新狀態(tài)值。
代碼如下
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};使用的時候像平常一樣
回調(diào)函數(shù)可以傳可以不傳遞
const [data,setData] = useCallbackState({});
setData({}, function (data) {
console.log("啦啦啦，我是回調(diào)方法", data);
})總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來實現(xiàn)。下面就說說這個React中的受控組件與非受控組件的相關(guān)知識，感興趣的朋友一起看看吧2021-05-05
這篇文章主要介紹了詳解react的兩種動態(tài)改變css樣式的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
nodejs和react實現(xiàn)即時通訊簡易聊天室功能
這篇文章主要介紹了nodejs和react實現(xiàn)即時通訊簡易聊天室功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
react antd checkbox實現(xiàn)全選、多選功能
目前好像只有table組件有實現(xiàn)表格數(shù)據(jù)的全選功能,如果說對于list,card,collapse等其他組件來說,需要自己結(jié)合checkbox來手動實現(xiàn)全選功能,這篇文章主要介紹了react antd checkbox實現(xiàn)全選、多選功能,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了React控制元素顯示隱藏的三種方法小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
作為一個前端開發(fā)時刻想著，怎么把自己寫的東西，丟到自己的服務器上面，然后展示給別人看。下面我就簡單直白的寫下，這篇文章主要給大家介紹了關(guān)于nginx配置React靜態(tài)頁面的方法教程,需要的朋友可以參考下。2017-11-11
詳解React Native開源時間日期選擇器組件(react-native-datetime)
本篇文章主要介紹了詳解React Native開源時間日期選擇器組件(react-native-datetime)，具有一定的參考價值，有興趣的可以了解一下2017-09-09
這篇文章主要為大家介紹了React可定制黑暗模式切換開關(guān)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
react-router?v6實現(xiàn)權(quán)限管理+自動替換頁面標題的案例
這篇文章主要介紹了react-router?v6實現(xiàn)權(quán)限管理+自動替換頁面標題,這次項目是有三種權(quán)限，分別是用戶，商家以及管理員，這次寫的權(quán)限管理是高級權(quán)限能訪問低級權(quán)限的所有頁面，但是低級權(quán)限不能訪問高級權(quán)限的頁面，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了antd?upload上傳如何獲取文件寬高問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02