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

以下对象结构的图像：

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

现在每个对象都有一个相应的组件：

，

，

。 状态在上下文中存储和管理。您可以单击城市以刷新其当前温度（API调用）。您还可以单击浮动操作按钮来更新所有城市

问题

考虑到每个城市都在加载自身（出于用户体验的原因），如何使用浮动动作按钮触发每个城市的刷新，并在加载完成之前显示加载动画。如果我只是从API中获取所有国家、地区和城市的整个对象，我无法控制哪个表何时完成，也无法相应地显示动画

我能想到的最佳解决方案

创建一个事件发射器之类的东西，并在刷新时触发每个城市

onRefreshClicked

。或者创建一个订阅服务器功能，您可以在其中传递回调，就像使用web套接字一样

但我觉得我的解决方案是一种反模式，违反了react的

单向数据流

规则。感觉真脏。有什么想法吗

---

顺便说一句，我使用的是react hooks。

您的第一个建议听起来并不会违反单向数据流。特别是如果您使用一个我已经研究过的钩子，但是我看不出这如何有助于像我的示例中那样发出事件？公平地说，我没有任何redux经验。如果可能的话，我很乐意举一个简单的例子。看看这并没有真正解决我的问题。他回答了如何使用

useReducer

调用异步函数并从子组件触发操作的问题。我更希望通过一个浮动操作按钮（父按钮）的事件触发子函数。我想在我最初阅读你的问题时，我还不太清楚。什么样的用户体验约束阻止您抽象这些函数并将它们传递下去？您的第一个建议听起来不像是违反单向数据流。特别是如果您使用一个我已经研究过的钩子，但是我看不出这如何有助于像我的示例中那样发出事件？公平地说，我没有任何redux经验。如果可能的话，我很乐意举一个简单的例子。看看这并没有真正解决我的问题。他回答了如何使用

useReducer

调用异步函数并从子组件触发操作的问题。我更希望通过一个浮动操作按钮（父按钮）的事件触发子函数。我想在我最初阅读你的问题时，我还不太清楚。什么样的用户体验约束阻止您抽象这些函数并传递它们？