登录或注册用户后如何在我的 React 应用程序中添加加载程序

Question

每当我从 api 获取数据时，我在添加加载程序时都会遇到一些问题。 基本上，每当我单击登录或注册时，它都不会显示加载程序，这会让用户感到困惑，因为当应用程序获取数据时，前端没有发生任何事情，因此用户不知道应用程序是否正在运行。

这是我的仓库：https://github.com/JUANCA99COL/face-recognition-app

任何帮助或建议都会很棒！

我尝试过使用 useffect()，但似乎我正在使用的 api 未获取。

谢谢

Answer 1

将初始 setIsLoading 设置为“true”，因此最初会显示加载程序，然后在 useEffect 中调用 API 时，会将状态 setIsLoading 更改为“false”以禁用加载程序。

还可以使用 E(false) 来更改您的状态 “const [setIsLoading，E] = useState（true）”

setIsLoading 将用于获取状态的值，E() 是更新该状态的函数

下面是更正后的代码，

const [setIsLoading, E] = useState(true);

useEffect(() => {

fetch('https://login-app-api-ap19.onrender.com/image', {
        method: 'put',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          id: this.state.user.id
        })
      })
  .then(response => response.json())
  .then(data => {
    setData(data);
    E(false);
  });

}, []);