已解决
react hook 获取setState的新值
来自网友在路上 167867提问 提问时间:2023-11-19 05:32:56阅读次数: 67
最佳答案 问答题库678位专家为你答疑解惑
- 利用useRef 存储最新值
let [count,setCount] = useState(0)let countRef = useRef(count)let handleClick = function (){setCount((prev)=>{countRef.current = prev+1return countRef.current})console.info(countRef.current)}
- 利用useRef
let [count,setCount] = useState(0)let countRef = useRef(count)countRef.current = countlet handleClick = function (){setCount((prev)=>{return prev+1})setTimeout(()=>{console.info(countRef.current)})}
- 封装一个自定义函数
//useSyncCallback.js
import {useEffect,useState,useCallback} from 'react'
export default function useSyncCallback(callback){const [proxyState, setProxyState] = useState({ current: false });const Func = useCallback(() => {setProxyState({ current: true });}, [proxyState])useEffect(() => {if (proxyState.current === true) setProxyState({ current: false });}, [proxyState]);useEffect(() => {proxyState.current && callback();});return Func
};
使用方法:
import React,{useState,useCallback,useRef} from 'react'
import {Button,Input} from 'antd'
import HighFrequency from '../../utils/HighFrequency';
import useSyncCallback from '../../utils/useSyncCallback'export default function HookOptimization() {let [name,setName]=useState('_')let handleChange = HighFrequency.debounce(function(e){setName(()=>{return e.target.value})fnc()})const fnc = useSyncCallback(() => {console.log(name)})return (<div><Input onChange={handleChange}/></div>)}
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"react hook 获取setState的新值":http://eshow365.cn/6-38962-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!