在useEffect中使用state,state不是最新值

简单介绍一下情况:

起初a的值是0,在组件挂载的时候注册了button的点击事件。然后点击一下累加按钮,在点击一点当前数字按钮,发现打印还是0,其实累加多少次,打印的都是0。但是页面可以正确渲染。

代码demo类似这样:

import React, { useEffect, useRef, useState } from "react";

function App() {
  const [a, setA] = useState(0)
  const btnRef = useRef(null)

  useEffect(() => {
    btnRef.current.onclick = () => {
      console.log(a, 'a')
    }
  }, [])
  return (
    <div>
      {a}
      <button onClick={() => setA(a + 1)}>累加</button>
      <button ref={btnRef}>当前数字</button>
    </div>
  );
}

export default App;

这个问题其实是因为闭包引起的。我在这里找到了一篇文章。

我们来简单分析一下,这是什么问题引起的。

  1. 调用App(),App组件数据初始化,此时a的值是0
  2. jsx开始渲染,挂载
  3. 挂载完毕之后执行useEffect,监听按钮点击事件,注意现在useEffect的依赖项是空数组
  4. 点击累加按钮,响应式数据发生变化、重新执行App()

注意这个时候执行了两次App(),第二次执行的时候并没有重新覆盖按钮的点击事件,因为useEffect监听是是空数组,所以当第二次执行App()之后,点击事件引用的a还是第一次App()执行的作用域,也就是形成了闭包。而第一次执行App()的时候,a的值是0,所以以后点击就一直输出0。

那么如果修改呢,可以这样改

 useEffect(() => {
    btnRef.current.onclick = () => {
      console.log(a, 'a')
    }
  }, [a])

也就是每次a的值改变,就重新监听点击事件

你可能感兴趣的:(web开发遇到的问题,javascript,前端,reactjs)