关于react hooks的使用

Question

我的场景是这样的：有一个输入框，点击保存的时候判断格式是否正确，正确才能保存，发送请求。

function HookExample() {
    const [canSubmit, setCanSubmit] = useState(false)
    useEffect(() => {
       // 这里写啥呢？还是不应该这么写
    },[canSubmit])
    function check() {
        if(格式正确){
            setCanSubmit(true)
        }
    }
    function save() {
        check()
        // 我知道check里面就算成功了也是异步的，所以第一次保存就有问题了。。。
        if(!canSbumit) return
        // 发送请求
        post(url)    
        
    }

}

总感觉怎么写都不行

Answer 1

可以在 useEffect 中执行请求操作，然后再请求完成之后重置 canSubmit

useEffect(() => {
    if (canSubmit) {
        post(url).finally(() => {
            setCanSubmit(false)
        })
    }
},[canSubmit])

Answer 2

useEffect(async () => {
  const result = await check();
  setCanSubmit(result);
});

Answer 3

把 setCanSubmit 暴露出来就可以了

function HookExample(initialValue = false) {
    const [canSubmit, setCanSubmit] = useState(initialValue)
    useEffect(() => {
       if(!canSbumit) return
       post(url)    
    },[canSubmit])
    
    return setCanSubmit

}

// 输入框 onChange 事件
   const handleInputChange = (e) => {
        const value = e.target?.value
        if(value 格式正确) {
            setCanSubmit(true)
        }
   }