React組件中監(jiān)聽(tīng)函數(shù)獲取不到最新的state問(wèn)題
場(chǎng)景
在useEffect事件中，更新setState或者redux后獲取到的state值為第一次的值，不是最新的
例如：
export default function Travel(props) {
const divRef = useRef(null)
const [count, setCount] = useState(0)
const handleClick = () => {
console.log('click',count);
}
useEffect(() => {
window.addEventListener('click', handleClick)
return () => {
window.removeEventListener('click', handleClick)
}
},[])
console.log('out',count);
return (
<div ref={divRef} >
<button onClick={() => {
setCount(count => count + 1)
}}>點(diǎn)擊</button>
</div>
)
}又或者
const [flag,setFlag] = useState(false);
const onClick = ()=>{
setFlag(!flag)
console.log(flag)
}
useEffect(() => {
document.addEventListener('click',onClick)
}, []);原因
找了一些資料了解到
因?yàn)楸O(jiān)聽(tīng)器綁定的是第一次render時(shí)生成的函數(shù)，這個(gè)函數(shù)的上下文中的state也是第一次的值，所以即便后面render了多次，因?yàn)榻壎ǖ氖堑谝淮蝦ender的函數(shù)，所以state值也是舊的。
解決方案1
useEffect(() => {
window.addEventListener('click', handleClick)
return () => {
window.removeEventListener('click', handleClick)
}
},[count])監(jiān)聽(tīng)值的變化，綁定并解綁事件
解決方案2
const stateRef = useRef(0)
const [state,setState] = useState(stateRef.current);
const Function = ()=>{
let data = JSON.parse(JSON.stringify(stateRef));
/*功能*/
stateRef.current = newData;
setState(stateRef.current)
} 通過(guò)useRef創(chuàng)建變量來(lái)改變state的值
其他情況
const stateRef = useRef(null);
useEffect(() => {
if (
!stateRef.current ||
(reduxState &&
JSON.stringify(reduxState) !== JSON.stringify(stateRef.current) &&
JSON.stringify(reduxState.id) !== JSON.stringify(stateRef.current?.id))
) {
sstateRef.current = JSON.parse(JSON.stringify(reduxState));
}
}, [reduxState]);比方說(shuō)redux緩存了一串?dāng)?shù)據(jù)，這個(gè)數(shù)據(jù)用于控制物體移動(dòng)，就可以監(jiān)聽(tīng)redux state,將值賦值給stateRef。
需要注意防止重復(fù)賦值，不然會(huì)造成抖動(dòng)。
判斷是否數(shù)據(jù)無(wú)變化，判斷是否切換了redux的數(shù)據(jù)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React中useState的使用方法及注意事項(xiàng)
useState通過(guò)在函數(shù)組件里調(diào)用它來(lái)給組件添加一些內(nèi)部state,下面這篇文章主要給大家介紹了關(guān)于React中useState的使用方法及注意事項(xiàng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了React常見(jiàn)跨窗口通信方式實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
基于React的狀態(tài)管理實(shí)現(xiàn)一個(gè)簡(jiǎn)單的顏色轉(zhuǎn)換器
這篇文章主要介紹了用React的狀態(tài)管理,簡(jiǎn)簡(jiǎn)單單實(shí)現(xiàn)一個(gè)顏色轉(zhuǎn)換器,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08
前兩章講到了，react 在 render 階段的 completeUnitWork 執(zhí)行完畢后，就執(zhí)行 commitRoot 進(jìn)入到了 commit 階段，本章將講解 commit 階段執(zhí)行過(guò)程源碼2022-11-11
react-native動(dòng)態(tài)切換tab組件的方法
在APP中免不了要使用tab組件,有的是tab切換,也有的是tab分類(lèi)切換.這篇文章主要介紹了react-native動(dòng)態(tài)切換tab組件的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-07-07
react中路由跳轉(zhuǎn)及傳參的實(shí)現(xiàn)
本文主要介紹了react中路由跳轉(zhuǎn)及傳參的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
在現(xiàn)代Web開(kāi)發(fā)中,React作為一種流行的JavaScript庫(kù),為開(kāi)發(fā)者提供了一種高效構(gòu)建用戶界面的方式,條件渲染是React中的一個(gè)關(guān)鍵概念,本文將深入探討如何在React中實(shí)現(xiàn)條件渲染,并通過(guò)示例代碼演示常見(jiàn)的用法,需要的朋友可以參考下2025-01-01
React Native 混合開(kāi)發(fā)多入口加載方式詳解
這篇文章主要介紹了React Native 混合開(kāi)發(fā)多入口加載方式詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
React?Fiber?樹(shù)思想解決業(yè)務(wù)實(shí)際場(chǎng)景詳解
這篇文章主要為大家介紹了React?Fiber?樹(shù)思想解決業(yè)務(wù)實(shí)際場(chǎng)景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React?高德地圖進(jìn)京證路線規(guī)劃問(wèn)題記錄(匯總)
這篇文章主要介紹了React高德地圖進(jìn)京證路線規(guī)劃問(wèn)題小記,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08