仅当 Promise 在 onChange 事件中解析时才触发 onChange 事件

Question

   const validate(id){
retun new Promise((resolve,reject)=>{
axioscall()
.then((res)=> resolve(res))
.catch((err)=>reject(err))
}}

我有以上承诺。仅当我的承诺解决或抛出被我的承诺拒绝的错误时，我才尝试调用 onChange 事件

   <checkbox onChange={(e)=>
validate(id)
.then((result) => result && handleChecked(e,id))
.catch((err)=>showError(err))/>

错误抛出成功，但是当promise解析handleChecked事件时不成功。我的意思是该复选框未选中。

错误抛出成功，但是当promise解析handleChecked事件时不成功。我的意思是该复选框未选中。有什么问题..如果我像下面这样写，事件被触发并且复选框被选中，但如何处理失败场景以显示错误..我如何修改上面的代码来处理成功和失败场景？

   <checkbox onChange={(e)=>
validate(id) && handleChecked(e,id))
/>

Answer 1

您可以使用状态来控制输入。

const MyComponent = () => {
    const [value, setValue] = useState(false)

    const handleChange = async () => {
        const isValid = await validate(id)

        if(isValid) {
            setValue(prev => !prev)
        }
    }

    <input type="checkbox" onChange={handleChange} checked={value} />
}

PS。要发出 HTTP 请求，最好使用第三方库，如

react-query

或

swr

，它可以帮助您跟踪请求、向用户显示加载程序、处理错误等等