为了账号安全,请及时绑定邮箱和手机立即绑定

如何在功能组件中渲染 DATA 之前等待 FETCH?

如何在功能组件中渲染 DATA 之前等待 FETCH?

万千封印 2022-06-05 16:26:57
我试图显示一个<Loading>组件,直到 DATA 获取成功,然后我显示一个子组件。我不明白为什么状态没有更新......我该如何处理?我正在使用react-admin,但我猜这并不重要。我有一个<Dashboard>应该传递defibs (Array)给<DefibsCard>.当我登录defibs时,<DefibsCard>我有一个空数组。谢谢 !const Dashboard = () => {  const dataProvider = useDataProvider();  const [loading, setLoading] = useState(true);  const [defibs, setDefibs] = useState([]);  const fetchDefibs = () => {    dataProvider.getList('defibrillateurs', {      filters: {}, sort: {field: 'id', order: 'ASC'}, pagination: {page: 1, perPage: 10}    }).then((response) => {      setDefibs(response.defibs);      setLoading(false);    })  }  useEffect(() => {    fetchDefibs();    console.log(loading)  }, [])  const classes = useStyles();  return (!defibs     ? <Loading />    : <div className={classes.flex}>        <div className={classes.leftCol}>          <div className={classes.flexColumn}>            // ...            <div className={classes.flex}>              <DefibsCard defibs={defibs}/> // Child component              <AlertsCard />            </div>          </div>        </div>        // ...      </div>);};
查看完整描述

3 回答

?
慕婉清6462132

TA贡献1804条经验 获得超2个赞

我确实有旧反应的经验

所以我可以建议你这些chanfes


useEffect(() => {

    setLoading(true); // here 

    fetchDefibs();

    console.log(loading)

}, [])

然后


const fetchDefibs = () => {

    dataProvider.getList('defibrillateurs', {

        filters: {},

        sort: {field: 'id', order: 'ASC'},

        pagination: { page: 1, perPage: 10 }

    }).then((response) => {

        setLoading(false);   // here 

        setDefibs(response.defibs)

        setLoading(false);

    }).catch( e =>         setLoading(false);)


}

然后


return(

    {!loading ? <Loading />

    :

    <div className={classes.flex}>

        <div className={classes.leftCol}>

            <div className={classes.flexColumn}>

                <Card>

                    <CardHeader title="Welcome to the administration" />

                    <CardContent>Lorem ipsum sic dolor amet...</CardContent>

                </Card>

            ......

   }

当您使用{ defibs &&它时,它将始终为真,因为您已初始化它,如果它是或并且使用 不是最好的方法,那么[]它只会是假的,就像数据库返回长度为 0 的数组然后对您的应用程序将显示加载undefinednulldefibs && defibs.length = 0[]


查看完整回答
反对 回复 2022-06-05
?
慕丝7291255

TA贡献1859条经验 获得超6个赞

对于功能组件我认为最好的是useeffect


import { useEffect, useState } from 'react';

function FetchEmployeesByQuery({ query }) {

  const [employees, setEmployees] = useState([]);

  useEffect(() => {

    async function fetchEmployees() {

      const response = await fetch(

        `/employees?q=${encodeURIComponent(query)}`

      );

      const fetchedEmployees = await response.json(response);

      setEmployees(fetchedEmployees);

    }

    fetchEmployees();

  }, [query]);

  return (

    <div>

      {employees.map(name => <div>{name}</div>)}

    </div>

  );

}


查看完整回答
反对 回复 2022-06-05
?
MMMHUHU

TA贡献1834条经验 获得超8个赞

我认为问题是您使用了错误的表达方式

!defibsfalse无论defibs是空数组还是加载的数组,总是返回。

您应该将表达式更改defibs.length <= 0为明确要求组件在为空<Loading />时呈现defibs


查看完整回答
反对 回复 2022-06-05
  • 3 回答
  • 0 关注
  • 91 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信