react如何同步獲取useState的最新狀態(tài)值
更新時(shí)間：2024年01月03日 09:08:18 作者：ass_ace
這篇文章主要介紹了react如何同步獲取useState的最新狀態(tài)值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
react同步獲取useState的最新狀態(tài)值
新的react hook寫法
官方默認(rèn)setState方法移除了回調(diào)函數(shù)，但我們有時(shí)候的業(yè)務(wù)場(chǎng)景需要我們同步拿到變量的最新變化值
以便做下一步操作，這時(shí)我們可以封裝一個(gè)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};使用的時(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)文章
這篇文章主要為大家詳細(xì)介紹了react封裝全局彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
React Router 中實(shí)現(xiàn)嵌套路由和動(dòng)態(tài)路由的示例
React Router 是一個(gè)非常強(qiáng)大和靈活的路由庫(kù)，它為 React 應(yīng)用程序提供了豐富的導(dǎo)航和 URL 管理功能，能夠幫助我們構(gòu)建復(fù)雜的單頁應(yīng)用和多頁應(yīng)用，這篇文章主要介紹了React Router 中如何實(shí)現(xiàn)嵌套路由和動(dòng)態(tài)路由,需要的朋友可以參考下2023-05-05
關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式
這篇文章主要介紹了關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
react native 原生模塊橋接的簡(jiǎn)單說明小結(jié)
這篇文章主要介紹了react native 原生模塊橋接的簡(jiǎn)單說明小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
聊一聊我對(duì) React Context 的理解以及應(yīng)用
這篇文章主要介紹了聊一聊我對(duì) React Context 的理解以及應(yīng)用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
使用react+redux實(shí)現(xiàn)計(jì)數(shù)器功能及遇到問題
使用redux管理數(shù)據(jù)，由于Store獨(dú)立于組件，使得數(shù)據(jù)管理獨(dú)立于組件，解決了組件之間傳遞數(shù)據(jù)困難的問題，非常好用，今天重點(diǎn)給大家介紹使用react+redux實(shí)現(xiàn)計(jì)數(shù)器功能及遇到問題，感興趣的朋友參考下吧2021-06-06
React中setState/useState的使用方法詳細(xì)介紹
這篇文章主要介紹了React中setState/useState的使用方法，useState 和 setState 在React開發(fā)過程中 使用很頻繁，但很多人都停留在簡(jiǎn)單的使用階段，并沒有正在了解它們的執(zhí)行機(jī)制2023-04-04
react中value與defaultValue的區(qū)別及說明
這篇文章主要介紹了react中value與defaultValue的區(qū)別及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
react自動(dòng)化構(gòu)建路由的實(shí)現(xiàn)
這篇文章主要介紹了react自動(dòng)化構(gòu)建路由的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React 添加引用路徑時(shí)如何使用@符號(hào)作為src文件
這篇文章主要介紹了React 添加引用路徑時(shí)如何使用@符號(hào)作為src文件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06