如何在功能部件中渲染数据之前等待FETCH？

Question

我正在尝试显示<Loading>组件，直到成功获取DATA，然后再显示Child组件。我不明白为什么状态没有更新...

我该如何处理？

我正在使用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>);
};

Answer 1

我确实有旧反应的经验所以我可以建议你这些杂物

Answer 2

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

Answer 3

这更多地在于您最初定义defibs变量的方式。让我们更仔细地看一下...

Answer 4

谢谢你们的答复。现在正在工作