ReactJS函数组件对象第二次更新

我有一个登录页面(功能组件),当用户尝试登录而不输入必填字段时,我必须显示错误消息(例如:“需要电子邮件”)。当存在无效字段时,我不应该进行API调用。

但是,无需输入字段,当我单击登录按钮时,API调用就完成了。再次单击登录按钮将停止API调用。

I have made this demo - https://stackblitz.com/edit/react-pd6vvk?file=login.js which explains the issue.

遵循的步骤:

1.单击登录名而不填写任何文本值。当字段无效时,您可以看到“ API请求已发出”语句。

2.再次单击登录按钮,现在显示“ API请求已停止”语句。

我是React的新手,我不知道解决此问题的原因和解决方案。

有人可以帮我吗?

谢谢,

阿比拉什

评论
  • hea
    hea 回复

    Because, setValidFields has async behaviour :

    validateLoginForm(); //<--- SetState is async
    console.log(validFields);
    if (isFormValid()) { //<---- so,this will still have true value
    
    // inside validateLoginForm()
    // this state change won,t be reflected immediately
    setValidFields(validFields => ({
        ...validFields,
        [key]: error.length == 0
    }));