解决react中useState状态异步更新的问题

// App.tsx
import {useState} from "react"

export default ()=>{

const [num,setNum]=useState(0)

const add=()=>{
  console.log("更新前",num)
  setNum(num+1)
  console.log('更新后',num)
}

return(
<div className='App'>
 <p>{num}</p>
 <button onClick={add}>num++</button>
</div>
)
}

import { useState, useRef, useEffect } from 'react';

export default(initState: any)=>{
    const stateRef = useRef(null as any);
    const [state, setState] = useState(initState);

    useEffect(() => {
    stateRef.current && stateRef.current(state);
    }, [state]);

    return [
        state,
        (newState:typeof initState):Promise<typeof initState>=>
        new Promise(rel=>{stateRef.current=rel;setState(newState)}) 
    ];
}

import useCallbackState from "@/customHooks/useCallbackState"
const [num,setNum]=useCallbackState(0)

const add=()=>{
   console.log('更新前'，num)
   setNum(num+1)
   .then((newNum:any)=>{
   console.log('更新后'，newNum)
   // console.log(num)
  })
}