示例
const [state,setState]=useState(1)
useEffect(()=>{
setInterval(() => {
console.log(state)//每秒打印一次state
}, 1000);
},[])//依赖为空
<div className="App">
<h2>{state}</h2>
<button onClick={()=>{setState(state=>state+1)}}>加一</button>
</div>
现象
当我们改变state值的时候,发现useEffect中打印的state值没有变化
原因
useEffect依赖为空时候,只会执行一次,即在第一次渲染的时候执行,所以state的值拿的永远都是第一次渲染时候的初始值。
如果想拿到或设置时候是最新的state的值呢?
设置值
setState(state=>state+1) //利用setState时候箭头函数作用,这样每次获取的state都是最新的值
useEffect(()=>{
setTimeout(() => {
setState(state=>{
console.log(state)
return state+1
})
}, 3000);
},[])
我只按了三下,最后是延长器里面加的,state的值是最新的。
获取值
useEffect(()=>{},[state]) //依赖于state
useEffect(()=>{
console.log(state)
//setState(state+1) 可别这么写喔 死循环喔
},[state])