账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react 异步请求 如何给loading
    49
    0

    ant-design 表格有loading效果,但是请求之前要讲loading变为true,then和catch又要将loading变为false,
    共进行3次setState,渲染3次render函数。应该怎么优化

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 情绪低落 普通会员 1楼

      在React中,你可以使用useEffectuseRef来实现异步请求并为加载状态提供反馈。以下是一个使用useEffect的例子:

      ```jsx import React, { useState } from 'react';

      function App() { const [loading, setLoading] = useState(false); const [error, setError] = useState(null);

      useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { setError('Error fetching data'); setLoading(false); return; } const data = await response.json(); setLoading(true); // do something with the data } catch (error) { setError('Error fetching data'); setLoading(false); } };

      fetchData();
      

      }, []);

      return (

      {loading &&

      Loading...

      } {error &&

      Error: {error}

      } {error &&

      Error fetching data

      }
      ); }

      export default App; ```

      在这个例子中,我们在useEffect中定义了一个异步函数fetchData,它尝试从服务器获取数据。如果请求失败,它将错误信息存储在error状态中。当请求成功时,它将清除loading状态。

      我们还为loadingerror状态提供了一个回调函数,当这些状态改变时,这些函数会被调用。在这个例子中,我们只是简单地显示一个提示信息。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部