在渲染之前等待几个组件的异步调用

Question

让一个带有X子组件的父进行反应。每个组件（包括父组件）执行未知持续时间的异步调用。所有异步调用完成后，有没有办法协调渲染？

我的问题的简单例子：

理想的解决方案：所有数字同时出现。

我知道我可以将所有异步调用从子节点移动到父节点。我不喜欢它的是我只需要特定孩子的数据......

我想把孩子们的承诺归还给父母，并且一旦所有的承诺得到解决，就用Promise.all()设置一个布尔值。但我无法使其发挥作用。这种方法通常是一个“好主意”吗？有没有其他方法可以在不移动异步调用的情况下解决它？

更新：

根据@ zero298的代码示例请求（查看CodeSandbox以获取更详细的示例）：

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

async function fetchData(setState) {
  const wait = getRandomInt(5);
  await new Promise(resolve => setTimeout(resolve, wait * 1000));
  setState(wait);
}

function Tile() {
  const [title, setTitle] = useState("");

  useEffect(() => {
    fetchData(setTitle);
  }, []);

  return <div>{title}</div>;
}

function App() {
  const [title, setTitle] = useState("");

  useEffect(() => {
    fetchData(setTitle);
  }, []);

  return (
    <div>
      <div>{title}</div>
      <Tile />
      <Tile />
      <Tile />
      <Tile />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

我建议遵循React最佳实践和lift state up。所以，是的，您应该将所有异步调用移至父级。或者更进一步，用户Redux集中管理您的应用程序的状态。

从技术上讲，您可以在子组件内部保留异步调用，并以某种方式编排它们。但是当你的程序变得更大时，管理它就变得很难，因为数据查询将分散在几乎所有你的文件中。

与往常一样，经过一段时间后，在一个组件中获取的数据仅在某些其他组件中需要，并且您的方法数据重用将是不可能的