Reactjs 获取onClick（）函数中的最新值

我的申请是柜台

import React，{useState}来自“React”；
函数App（）{
const[count，setCount]=React.useState（0）；
常量添加=（）=>{
设置计数（计数+1）
console.log（count）//这里我想获取更新的计数
}
返回(
你好{count}
添加
);
}

编辑：正如@Drew Reese在评论中指出的那样，变异状态通常是个坏主意。所以你应该先复制变量，然后进行变异。见本修订规范：

import React，{useState}来自“React”；
函数App（）{
const[count，setCount]=React.useState（0）；
常量添加=（）=>{
让count2=计数
setCount（++count2）
console.log（count2）//这里是更新的计数：）
}
返回(
你好{count}
添加
);
}

您可以导出默认的应用程序功能组件

import React，{useState}来自“React”；
函数App（）{
const[count，setCount]=useState（0）；
常量添加=（）=>{
设置计数（计数+1）
console.log（count）//这里我想获取更新的计数
}
返回(
你好{count}
添加
);
}
导出默认应用程序

为了满足您的需求，您必须使用

useffect

。因为setState没有回调功能

import React, {useState,useEffect} from "react";

 function App() {
  const [count, setCount] = React.useState(0);

  useEffect(() => {
    console.log(count);
 },[count]);


  const add = () => {
    setCount(count+1)
    //console.log(count) //here you get the updated count :)
  }


  return (
    <div className="App">
      <h1>Hello {count}</h1>
      <button onClick={add}>ADD</button>
    </div>
  );
}

import React，{useState，useffect}来自“React”；
函数App（）{
const[count，setCount]=React.useState（0）；
useffect（（）=>{
控制台日志（计数）；
}，[计数]；
常量添加=（）=>{
设置计数（计数+1）
//console.log（count）//这里是更新的计数：）
}
返回(
你好{count}
添加
);
}

如果您正在更新状态，而新状态取决于以前的状态，则应通过以下方式进行更新：

  const add = () => {
    setCount(prevCount => prevCount + 1);
  }

关于

useffect

：

useEffect(() => {
 console.log(count);
}, [count])

上述代码在每次计数更改时都会运行，但由于您说过要分派操作，并且不希望每次都分派操作，因此可以有条件地执行操作：

useEffect(() => {
 if(count === 5) {
   console.log('Don't dispatch anything here');
 } else {
   console.log('Dispatch here');
 }
}, [count])

---

为什么不把add函数做成这样呢

const add = () => {
    const newState = count + 1;
    setCount(newState)
    console.log(newState) // Here I want to get the updated count
}

---

为什么这很重要？从逻辑上讲，如果您想要当前计数，您可以只记录

count+1

。我认为他使用了

count

示例来演示他试图实现的目标。我认为是在

setCount

之后执行函数，而不使用

useffect

。不确定这是否可行。是的，为什么不使用

useffect

。不过，使用

useffect

挂钩是您应该使用的模式

Add

应该做一件事，更新状态，效果应该做组件的副作用。@Ramesh，我需要在我的应用程序中使用它，这个例子就是这个想法。在我的实际应用程序中，我必须在商店中发送一些东西，现在我正在使用useffect执行此操作。但是当我添加值（dispatch）时，问题就出现了，因为在离开页面并在结果中访问它之后，我再次添加了值。这就是为什么我要在onClick函数内部寻找一个分派方法，而不是在useffect内部。