时间戳

首页 > 解决方案 > 通过将函数传递给 setCount 来修复陈旧闭包的副作用

javascript - 通过将函数传递给 setCount 来修复陈旧闭包的副作用

问题描述

我有一个关于过时关闭的问题。

代码：

import React, { useState } from "react";

export default function App() {
  const [flag, setFlag] = useState(false);
  const [count, setCount] = useState(0);

  if (!flag) {
    console.log("before", count);
    setCount(count => count + 2);
    setCount(count => count + 3);
    setCount(count => count + 1);
    setFlag(true);
    console.log("after", count);
  }

  return (
    <div>
      <p>Render: {flag + ""}</p>
      <p>Render: {count}</p>
    </div>
  );
}

输出：

Render: true

Render: 6

在这里，我修复了陈旧的闭包 setCount

setCount(count => count + 2);
setCount(count => count + 3);
setCount(count => count + 1);

但是在控制台中我得到

before 0
after 0

我期望得到的地方

before 0
after 6

你能解释一下为什么控制台日志中的计数仍然是 0 吗？

现场演示： https ://codesandbox.io/s/crazy-joliot-xnmrp

谢谢！

标签： javascriptreactjsclosures

解决方案

count是一个常量；它不可能改变。的目的setCount不是改变之前渲染的变量，而是指示 react 再次渲染。在下一次渲染中，将使用新值创建一个新变量。

如果您想查看新值，请将您的 console.log 放在组件的主体中，您将看到它以新值重新呈现。

推荐阅读