在loginPage使用useAsync的问题

来源：7-3 登录注册页面Loading和Error状态处理，与Event Loop详解

慕婉清9403867

2021-02-16

const LoginScreen = ({onError}:{onError:(error:Error)=>void }) => {
  const { login, user } = useAuth();
  const {run, isLoading} = useAsync()
  console.log(isLoading);

在F12里isLoading是正常的,false能变成true
而在return 里的isLoading永远是false。这是什么原因呢?
唯一的区别是我使用了craco-antd,而不是craco-less,用craco-less会报错没有按需导入antd
我记得我使用craco-less的时候查询页面是正常loading的现在也不行了。

<Form.Item>
        <LongButton loading={isLoading} htmlType={"submit"} type={"primary"}>
          登录
        </LongButton>
</Form.Item>
<Form.Item>
        <p>{isLoading === false ? 'false' : 'true'}</p>
</Form.Item>

写回答

1回答

慕婉清9403867

提问者

2021-02-16

  const [test,setTest] = useState(false)
  const handleSubmit = async (values: { username: string; password: string }) => {
    try{
      setTest(true)
      //用try catch的话因为login是异步的所以必须await
      await run(login(values))
    }
    catch(e){
      onError(e)
    }
    setTest(false)
  };

改用其他state来充当loading的话是正常的

Nolan

慕婉清9403867

啊是吗，我刚刚下载你的代码准备看呢。。。找到问题就好，谢谢及时来更新

2021-02-16

共4条回复

React17+Hook+TS4 优质实践，仿 Jira 企业级项目

解锁 React17 高阶用法，轻松应对大型复杂长周期项目

2691 学习 · 1236 问题

查看课程

相似问题

useAsync中Run函数参数中Promise的类型问题