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