React：在功能组件中获取后更改状态

Question

我有以下组件：

export default function SignIn()  {
    const [isLoading, setIsLoading] = useState(false);
    const classes = useStyles();
  
    const handleSubmit = (event) => {  
      event.preventDefault();
      if(!AuthService.login(event.target))
      {
        setIsLoading(false);
      }
      
    }

    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form className={classes.form} noValidate onSubmit={(event) => { handleSubmit(event); setIsLoading(true); }}>
            { isLoading ?
              <CircularProgress/> :
              <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
              >
                Sign In
              </Button>
            }  
          </form>
        </div>
      </Container>
    );
  }

当我提交表单时，“isLoading”变为真，加载栏出现。无论如何，如果“AuthService.login()”失败，“isLoading”状态不会更新。

我做错了什么？

工作代码

问题与

有关

if(!AuthService.login(event.target))

是一个异步函数，所以我必须“等待”响应才能评估它的结果。

工作代码：

  async function handleSubmit (event) {  
    event.preventDefault();
    setIsLoading(true)
    try {
      await AuthService.login(event.target);
      setIsLoading(false)
    } catch (e) {
      console.log('Handle errors here');
    } finally {
      console.log('We do cleanup here');
    }
  }

Answer 1

您总是在 onSubmit

中将 isLoading 设置为 true

export default function SignIn()  {
    const [isLoading, setIsLoading] = useState(false);
    const classes = useStyles();
  
    const handleSubmit = (event) => {  
      event.preventDefault(); 
      setLoading(true)
      if(!AuthService.login(event.target))
      {
        setIsLoading(false);
      }
      
    }

    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form className={classes.form} noValidate onSubmit={(event) => { handleSubmit(event) }}>
            { isLoading ?
              <CircularProgress/> :
              <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
              >
                Sign In
              </Button>
            }  
          </form>
        </div>
      </Container>
    );
  }

Answer 2

变化：

onSubmit={(event) => { handleSubmit(event); setIsLoading(true); }}

至：

onSubmit={(event) => { handleSubmit(event) }}

同时将 handleSubmit 更改为：

 const handleSubmit = (event) => {  
      event.preventDefault();
      setLoading(true);
      if(!AuthService.login(event.target))
      {
        setIsLoading(false);
      }
      
    }

React：在功能组件中获取后更改状态

React: change state after fetch in functional component

reactjs

react-state

工作代码