如何修复两次单击按钮上的 React 状态更新？答案

【问题标题】：How to fix React state update on click button twice?如何修复两次单击按钮上的 React 状态更新？
【发布时间】：2021-01-06 04:45:07
【问题描述】：

我正在使用 webpack 并做出反应。我在我的应用程序中创建计数增量，但是当我单击按钮状态没有改变时，但是当我再次单击而不是计数增量时，或者您可以说状态已更新。请检查我下面的代码，让我知道我错在哪里。

您可以查看我点击了两次但计数为 1 的下图。

import React, { useState } from "react";

const Count = () => {
  let [count, setCount] = useState(0);

  function click() {
    console.log("clicked");
    setCount(count++);
  }
  return (
    <div>
      <button onClick={click} className="btn btn-primary">
        Click here
      </button>
      <h3>{count}</h3>
    </div>
  );
};

export default Count;

感谢任何解决方案！

【问题讨论】：

您能否确认其中一个正确答案，以便人们知道此问题已得到解决。

标签： reactjs

【解决方案1】：

在 React 中，状态更新是异步的。
你应该写：

setCount(previousCount => previousCount + 1);

【讨论】：

【解决方案2】：

好的，您有以下三种解决方案之一：

将函数传递到您的设置状态：如setCount(prevState => prevState +1)
做一个预增量而不是像：setCount(++count)
使用增量手动添加，例如：setCount(count + 1)

您的代码不起作用，因为您使用的是后递增操作，该操作使用该值然后将其递增 1，这导致您当前面临的混乱。

【讨论】：

不客气，我们都去过那里。当我第一次开始使用 react 并表示 xD 时，这是我存在的痛苦

【解决方案3】：

counter++ 是后增量的，它首先使用计数值，然后将其加 1。因此，第一次单击该按钮时，它会使用 count 设置计数，然后将其加 1。使用预增量 ++count 或 count + 1 而不是 count++

【讨论】：

【解决方案4】：

使用之前的状态

 function click() {
    console.log("clicked");
    setCount(prevCount => prevCount+1);
    //or
    //setCount(count+1);
  }

【讨论】：