使用反应钩子答案

【问题标题】：Using react hooks使用反应钩子
【发布时间】：2020-05-03 11:56:00
【问题描述】：

在尝试理解 React 钩子时，我写了这个小代码：

import React, {useState} from "react";
import "./styles.css";

export default function App(props) {
  var [x, setX] = useState(0);

  function handleClick(e) {
    setX(x++);

    console.log(x);
  }

  return(<div className="App">
    <h3 className="h"> Welcome user, please press this button:</h3>   
    {x}
    <br/>
    <button className='button' onClick={handleClick}> Click </button>
  </div>);
}

每当我按下按钮时，我都希望在控制台中得到输出 1 2 3 4 5 6...，但我得到了这个奇怪的输出而不是 1 2 2 3 3 4 4 5 5 6 6。

有人可以解释为什么我们会得到这样的输出以及如何解决它吗？

【问题讨论】：

我前段时间回答过一个类似的问题：stackoverflow.com/questions/59495222/cant-setstate-in-reactjs/…。基本上，状态设置是异步的，这就是为什么在setX 之后立即记录状态可能会导致“旧”值。
我看不出您是如何在这样的代码中仅使用一个 console.log 获得重复值的 - 您确定可以使用列出的代码重现您的问题吗？（是的，在setX 之后修改x 和console.log 都没有意义，但这些是不会重复输出的单独问题）
我也不知道我是如何得到重复值的，但是当我尝试安东尼的回答时，问题就解决了！我现在将尝试更多地了解导致这种行为的原因。

标签： reactjs

【解决方案1】：

您正在使用x++ 命令修改x，然后再次设置它。你需要在 handleClick 函数中做这样的事情：

setX(x + 1);

console.log(x);

原因是x++ 等价于x = x + 1 而不是x + 1。

额外提示：

使用const 而不是var，以便解释器警告您修改不可变值。

【讨论】：

setX - stackoverflow.com/a/58877875/1176601 之后的 console.log 没有意义
是的，console.log 中的 x 将打印以前的值，您可以将 x+1 保存到变量中并打印出来，因为 setX 几乎可以保证设置状态
我刚刚添加了console.log用于调试目的，现在我将其删除。

【解决方案2】：

您还可以将回调函数传递给您的 setX 函数。

这将确保在进行计算时，您将始终在回调中使用先前的值。

这是因为setX 是一个异步函数。

你可以这样做：

  function handleClick(e) {
    setX(previousCount => previousCount + 1);
    console.log(x);
  }

附加了工作实现。

【讨论】：