react useState 异步更新的解决方法

遇到问题：：

子组件调用props中父组件的方法，去更新useState中的值。父函数组件中使用useState进行数据存储，导致数据异步，不能及时获取当前最新的数据。

原因：

这是因为React里事件分为合成事件和原生事件，合成事件和钩子函数都是异步的，原生事件是同步的。因为useState是异步事件，所以会出现不能及时获取到最新值的情况。

解决方法：

先使用useRef进行存储数据，再使用useEffect监听数据变化，并进行更新。

  const cbTable = useRef<Params>();
  const [params, setParams] = useState<Params>({ status: undefined, type: undefined, page: 1, size: 40 })
    useEffect(() => {
    cbTable.current = params
  }, [params])
  
    // 筛选选项变更
  function change(val: any) {
    setParams((prev: Params) => ({
      ...prev,
      [val.type]: val.value
    }))

  }
  //父组件
  <div className='approval'>
  //子组件
      <SelectBox type={true} isShoe={isShowUp} reset={() => { reset() }} sumbit={() => { sumbit() }} params={params} change={change} close={() => { close() }}></SelectBox>
    </div>

然后在之后需要使用info数据的地方只需要获取infoRef.current即可获得最新的info数据内容。 这里使用setTimeout 来获取更新后的最新在值

第二种解决方法：在 网上寻找的，自定义hook 在文件中定义 hook

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 '@/components/customHooks'  //自定义HOOK 解决useState异步更新问题
  // 筛选提交
  function sumbit() {
    setParams((prev: Params) => ({
      ...prev,
      page: 1,
      size: 40
    })).then(()=> {
      setTable([])
      getList()
    })
    setShoeUp(false)
  }

第一种方法尝试成功了，但是第二种没有尝试成功，后续会在尝试一下 简单的方法，第一种需要定义的变量多了还需要多进行监听