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