使用事件发射器在响应中触发多个状态更新是否不好？

Question

图像遵循对象结构：

const countries = [
  {
    regions: [
      {
        cities:[
          {
            temperature: 50
          },
          ...
        ]
      }
      ...
    ]
  },
  ...
]

现在，每个对象都有相应的组件：<Country/>，<Region/>，<City/>。 状态在上下文中存储和管理。您可以单击城市以刷新其当前温度（API调用）。您还可以点击浮动操作按钮来更新所有城市。

问题

考虑到每个城市都在加载自身（出于UX的原因）并显示加载动画，直到完成加载，如何使用浮动操作按钮触发每个城市的刷新。如果我再次从API中获取所有国家，地区和城市的整个对象，那么我将无法控制哪个表何时完成并且无法相应地显示动画。

我能想到的最佳解决方案

创建一个事件发射器，然后触发每个城市onRefreshClicked。或创建订阅者功能，像传递Web套接字一样，可以在其中传递回调。

但是感觉我的解决方案是反模式的，并且违反了one-way data flow的反应规则。 Als感觉真的很脏。有什么想法吗？

我正在使用react-hooks。