react hooks方法获取不到最新的state解决方法
程序员文章站
2022-07-01 21:47:44
问题在setState方法执行之后,再执行自定义的方法,这个自定义方法里面获取不到最新的state状态import React, {useState} from "react";import { Button } from "antd"const Demo = () => { const [num, changeNum] = useState(1) const [str, changeStr] = useState("现在数字是1") const getNum...
问题
在setState方法执行之后,再执行自定义的方法,这个自定义方法里面获取不到最新的state状态
import React, {useState} from "react";
import { Button } from "antd"
const Demo = () => {
const [num, changeNum] = useState(1)
const [str, changeStr] = useState("现在数字是1")
const getNum = () => {
const newStr = "现在数字是" + num
console.log(newStr)
changeStr(newStr)
}
const setNum = () => {
// 使用 async await 自执行函数 setTimeout 都没用
changeNum(num + 1)
// 执行之后 getNum里拿不到最新的state
getNum()
}
return (
<div>
<Button onClick={setNum}>点我+1</Button>
<div>{num}</div>
<div>{str}</div>
</div>
)
}
export default Demo
解决
- 第一种
通过useEffect方法监听num 再去触发getNum函数
useEffect(() => {
getNum()
}, [num])
const getNum = () => {
const newStr = "现在数字是" + num
changeStr(newStr)
}
const setNum = () => {
changeNum(num + 1)
}
- 第二种
const numRef = useRef(1)
const [num, changeNum] = useState(numRef.current)
const [str, changeStr] = useState("现在数字是1")
const getNum = () => {
const newStr = "现在数字是" + numRef.current
changeStr(newStr)
}
const setNum = () => {
numRef.current = num + 1
changeNum(numRef.current)
getNum()
}
本文地址:https://blog.csdn.net/aminwangaa/article/details/107379851
上一篇: Spring框架的AOP编程,最通俗的语言解释,易懂易学
下一篇: Apache Sentry部署
推荐阅读
-
小程序云开发获取不到数据库记录的解决方法
-
使用最新版本的androidjunitrunner运行测试用例报:xxx/R.txt (系统找不到指定的文件。)的解决方法
-
file_get_contents获取不到网页内容的解决方法
-
react hooks方法获取不到最新的state解决方法
-
vue第一次获取不到元素的解决方法记录
-
TinyMCE提交AjaxForm获取不到数据的解决方法
-
数据输出${requestScope.msg}获取不到值的解决方法
-
file_get_contents获取不到网页内容的解决方法_PHP教程
-
file_get_contents获取不到网页内容的解决方法_php技巧
-
file_get_contents获取不到网页内容的解决方法