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

谢谢！

最佳答案

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

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

关于javascript - 通过将函数传递给setCount来修复陈旧关闭的副作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60424639/