react hooks方法获取不到最新的state解决方法
问题
在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()
}
完整第一种代码
import React, {useState, useEffect} from "react";
import { Button } from "antd"
const Demo = () => {
const [num, changeNum] = useState(1)
const [str, changeStr] = useState("现在数字是1")
useEffect(() => {
getNum()
}, [num])
const getNum = () => {
const newStr = "现在数字是" + num
changeStr(newStr)
}
const setNum = () => {
changeNum(num + 1)
}
return (
<div>
<Button onClick={setNum}>点我+1</Button>
<div>{num}</div>
<div>{str}</div>
</div>
)
}
export default Demo
完整第二种代码
import React, {useState, useEffect, useRef} from "react";
import { Button } from "antd"
const Demo = () => {
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()
}
return (
<div>
<Button onClick={setNum}>点我+1</Button>
<div>{num}</div>
<div>{str}</div>
</div>
)
}
export default Demo