是否存在使用HOC和挂钩进行多次提取调用的模式？

Question

我想创建如下内容：

<FetchApi data="users" render={(users) => {
   { users
        .map(u => (<FetchApi data="debts" where={{ userId: u.id }} 
           render={(d) => (<><div>{u.name}<div><div>d.totalDebt</div></>)} />)
}>
</FetchApi>

因此，基本上，每个FetchApi组件都可以执行某些操作，并且可以在将其与相同类型的其他组件嵌套在一起时将其组合...

<FetchApi ...something
   <FetchApi ...somethingElse
      <FetchApí ...andOneMore
         <Component {...something, ...somethingElse, ...andOneMore}

这是明智的选择吗？有没有更有效的方法来达到相同的结果？这种方法主要是因为我正在“框架”上工作，所以我需要提供一个公共接口来获取数据并对其进行汇总。

当前FetchApi可以工作，内部使用钩子，但是当子FetchApi实例依赖于以前的调用时，它变得复杂，钩子似乎不是正确的答案，除了Mobx是选择状态管理库，您将代替我做什么？