【问题标题】：React: change state after fetch in functional componentReact：在功能组件中获取后更改状态
【发布时间】：2021-09-01 11:01:37
【问题描述】：

我有以下组件：

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”变为 true，并且显示加载栏。无论如何，如果“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');
    }
  }

【问题讨论】：

标签： reactjs react-state

【解决方案1】：

变化：

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);
      }
      
    }

【讨论】：

我试过这个，但由于某种原因，这不会更新“isLoading”的状态。事实上，如果我使用 Chrome 开发人员工具进行检查，我会看到“isLoading”状态始终保持“假”
@FedericoArona 您能否在codesandbox 中分享您的代码的简单示例？
感谢您的回答。问题是“！AuthService.login”是一个异步函数，我完全忘记了“等待”响应。所以if(!AuthService.login(event.target)) 总是返回“未定义”。我将使用工作代码更新我的问题并接受您的回答。谢谢。

【解决方案2】：

您总是在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>
    );
  }

【讨论】：

我试过这个，但由于某种原因，这不会更新“isLoading”的状态。事实上，如果我使用 Chrome 开发人员工具进行检查，我会看到“isLoading”状态始终保持“假”