时间戳

首页 > 解决方案 > 如何在功能组件中渲染 DATA 之前等待 FETCH？

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

问题描述

我试图显示一个<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>);
};

标签： javascriptreactjsreact-admin

解决方案

我确实有旧反应的经验
所以我可以建议你这些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[]

推荐阅读