由业务中的奇怪现象引出useEffect所谓的闭包陷阱

美短金渐层

已于 2022-02-18 18:28:58 修改

阅读量838

点赞数

文章标签： javascript 前端 react.js

于 2022-02-18 17:44:25 首次发布

本文链接：https://blog.csdn.net/qq_45604163/article/details/123008035

版权

本文通过分析业务中遇到的三个奇怪现象，探讨了React useEffect在处理state更新时可能出现的闭包问题。作者指出，useEffect回调内部会缓存首次访问的state值，导致在回调中无法获取到最新的state。现象三表明这种机制可能仅适用于state，而不适用于普通变量。总结启示是在useEffect中应避免对同一状态进行多次更改。

摘要由CSDN通过智能技术生成

由业务中的奇怪现象引出useEffect所谓的闭包陷阱

业务现象
思考与理解
启示

业务现象

现象一

代码如下

function App() {
   

  const [Info, setInfo] = useState({
   
    data: 0,
    chart: {
   
      x: [],
      y: []
    }
  });

  useEffect(() => {
   
    Promise.resolve().then(() => {
   
      let t = {
   
        data: 0,
        chart: {
   
          x: [],
          y: []
        }
      };
      t.data =