亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在功能組件中渲染 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 關注
  • 121 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號