reactjs - 渲染前等待多个组件的异步调用

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);

标签： reactjs

Answer 1

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

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

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