useState未及时更新问题(自定义hook)

最近遇到一个功能需求是要在弹窗确定的时候同时提交两个表单，提交我是通过弹窗自带的onOk方法结合form表单使用Form.useForm(）对表单进行提交的，再用表单提交的参数作为新增接口的参数，最后出现的问题是第一次点击确认时传的是空值，第二次才是正常的可以新增，原因是表单提交是时候使用了useState 没有及时更新导致。查阅了很多资料最后才找到解决办法.

解决办法:通过自定义useEffect hook 使里面的代码部分在页面初次加载的时候不执行 在页面渲染完成后如果第二个参数发生变化才执行

代码部分

自定义useEffect：

//自定义useeffect  让useeffect内容在页面初次加载时不执行
export const useDidUpdateEffect=(fn, inputs) =>{
  const didMountRef = useRef(false);
  useEffect(() => {
    if (didMountRef.current) fn();
    else didMountRef.current = true;
  }, inputs);
}

 自定义hook使用"

useDidUpdateEffect(()=>{
    (async()=>{
      setLoading(true)
      let data:any=await SystemService.InspectionPoint({submitExamUnitDTO:tform,submitExamUnitSpotDTO:bform});
      if(!!data){
        message.success("保存检测点操作成功");
      }
     setLoading(false);
     setModalVisible(false);
     getTableData(1, names, unitName, sn);
     setCurrent(1)
    })()
  },[tform,bform])

 最后是弹窗确认时表单提交使用useState 

//新增单位表单提交
  const topFinish=(e)=>{
    console.log("top",e)
    setTform({
      ...e,
      remarks:e.ramarks||"",
      areaId:e.areaId[2],
      isAutoSample:e.isAutoSample?"0":"1",
      status:1
    })
    }
  const botFinish=(e)=>{
    // console.log("ebot",e)
    let dataArr:any=[];
    for(var i=0;i<numArray;i++){
       dataArr.push({
         name:e[`name${i}`],
        //  unitId:e[`unitId${i}`],
         status:e[`status${i}`],
         address:e[`address${i}`],
         locationX:e[`locationX${i}`],
         locationY:e[`locationY${i}`],
         remarks:e[`remarks${i}`]||""
       })
    };
    setBform(dataArr);
  }

 基本上这样就解决了我遇到的问题，果然问题还是得自己真正的遇到过才会留下印象。最后希望大佬们多多指正  让我学习学习其他的新方法。

                                                                                             -