在React 中处理具有相互依赖状态的 Web 表单的好方法是什么，其中一个输入元素的变化会导致其他元素的级联动态变化？
这里有一个例子：我正在构建一个包含四个react-select组件(我们称之为 A/B/C/D)的 React 表单，我正在尝试将它们连接起来，以便一个Select中的更改将导致一个或多个其他组件的更改。
例如：
- 如果用户更改
A，则在B中重新加载数据。尝试在加载数据后B中保持类似的选定选项。"相似"意味着如果新数据包含具有相同名称的选项，即使基础对象不同，也要在B中保持该命名选项处于选中状态。否则清除B的选择。 - 如果用户更改
B，则加载CA数据的过滤子集，并B选择选项来控制过滤的工作方式。如上所述，如果C的新内容具有同名选项(即使基础数据不同)，请保持选中状态。否则，清除C中的选择。 - 如果用户更改
A并且B中有选择，并且当前未在C中选择任何内容，则使C的选择与所选选项A匹配。 - 如果用户更改了
C(包括是否通过从A或 B 级联的更改更改！)然后刷新D的内容，但如上所述，尝试保持D中选中的同名标签，即使它下面的数据已更改。 否则，选择新填充D中的第一个选项。
我相当自在地使用受控组件构建 React 应用程序，其中状态机很简单，依赖项很清楚。但在这种情况下，依赖树很复杂！
我已经将我的状态(A-D的内容及其所选选项)推送到容器组件。
但我发现这样做就像在毛衣上拉线。在我将状态移动到顶部之后，现在我需要特定于域的逻辑来确定如何处理状态，并且该逻辑(例如获取数据并将其转换为每个组件中的用户可见 UI)当前封装在较低级别的组件中。例如，组件A负责加载A的数据，B加载B的数据等。
我是否还需要将该逻辑向上移动到顶级组件？或者，对于这种复杂的、相互依赖的 UI 状态，我应该考虑其他模式吗？
如果这很重要，我正在使用没有任何上下文、状态管理或表单库等的普通 React。只是useState和react-select.
这可以通过持有具有react-select组件的主状态和逻辑的组件来解决。这些react-select应该是同一父级的兄弟姐妹：
MyStateHolderComponent
|
| Holds state
| const [someState, setSomeState] =useState(null)
|
+-- component A (on select, updates sameState from parent, you can drill a function to component A to do so)
+-- component B (receives someState as prop. Every time component A updates, it will be re rendered with the new prop)
+-- component C
+-- component D
同时，组件 A、B、C、D 可能具有自己的状态。 可以通过向下钻取更新父状态或使用上下文 API 的回调来处理此体系结构。