React組件中監(jiān)聽函數(shù)獲取不到最新的state問題

更新時間：2024年01月25日 09:09:28 作者：你是KKKK呀

這篇文章主要介紹了React組件中監(jiān)聽函數(shù)獲取不到最新的state問題問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

場景

在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)
 
            }}>點擊</button>
        </div>
    )
}

又或者

const [flag,setFlag] = useState(false);
  
  const onClick = ()=>{
    setFlag(!flag)
    console.log(flag)
  }
  
  useEffect(() => {
    document.addEventListener('click',onClick)
  }, []);

原因

找了一些資料了解到

因為監(jiān)聽器綁定的是第一次render時生成的函數(shù)，這個函數(shù)的上下文中的state也是第一次的值，所以即便后面render了多次，因為綁定的是第一次render的函數(shù)，所以state值也是舊的。

解決方案1

useEffect(() => {
    window.addEventListener('click', handleClick)
    return () => {
        window.removeEventListener('click', handleClick)
    }
},[count])

監(jiān)聽值的變化，綁定并解綁事件

解決方案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)
}

通過useRef創(chuàng)建變量來改變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]);

比方說redux緩存了一串數(shù)據(jù)，這個數(shù)據(jù)用于控制物體移動，就可以監(jiān)聽redux state,將值賦值給stateRef。

需要注意防止重復賦值，不然會造成抖動。

判斷是否數(shù)據(jù)無變化，判斷是否切換了redux的數(shù)據(jù)。