Reactjs 有没有办法确保子组件在父组件之后触发操作？

当我试图在应用程序入口点定义的useEffect钩子中启动操作时，我遇到了问题。在组件树的下部，我使用useEffect钩子进行API调用，这些调用使用在我描述的入口点中检索的关键数据段。似乎我不想将关键数据块的提取向下移动到每个需要它的子组件中。我在这里使用反模式吗

我唯一能想到的另一个选择是在检索到该数据之前不调用API，但出于可重用性的目的，这不是一种好的方法，并且会带来很多潜在的问题

组件树如下所示：

<App> <-- useEffect hook retrieves crucial piece of data
    <Child /> <-- useEffect hook calls API with data
</App>

下一步你必须做

创建上下文以向子组件提供有关父级初始化的信息
在父组件中创建一个布尔状态变量
isInitialized
，并在父组件初始化时将其设置为
true
。您还必须向上下文提供
isInitialized
：
将子组件中的挂钩
useffect
更改为
useffectwhenparentinitialized
您可以在此处查看完整示例：
您必须执行下一步操作

创建上下文以向子组件提供有关父级初始化的信息
在父组件中创建一个布尔状态变量
isInitialized
，并在父组件初始化时将其设置为
true
。您还必须向上下文提供
isInitialized
：
将子组件中的挂钩
useffect
更改为
useffectwhenparentinitialized
您可以在此处查看完整示例：

const ParentInitializeContext = React.createContext(false);


function App(props) {
  const [isInitialized, setIsInitialized] = useState(false);

  useEffect(() => {
    //here you retreive a crucial piece of data and then call setIsInitialized(true);
  }, []);
  return (
    <ParentInitializeContext.Provider value={isInitialized}>
      {props.children}
    </ParentInitializeContext.Provider>
  );
}


function useEffectWhenParentInitialized(fn, inputs = []) {
  const isParentInitialized = useContext(ParentInitializeContext);
  useEffect(() => {
    if (isParentInitialized) {
      fn();
    }
  }, [...inputs, isParentInitialized]);
}