reactjs - 在 React 中有效地在孩子和父母之间同步数据

Question

我有一个 API 调用，它需要一个包含 200 个键值对的字典。我想将此调用拆分为多个较小的调用，这可能会重用一些数据。例如 30 个调用，每个调用使用 10 个键值。

为了做到这一点，我创建了一个父组件，假设它被称为Form. 此外，我将创建更小的表单，将一些数据传递给Form组件。如果对于某些较小的表单，数据已经存在于Form组件中，我想预先填充它。

所以在这个例子中，Form被分成 30 个更小的表单/步骤，它们与Form.

主要问题是这些孩子不是直系孩子。由于我使用的是 Material UI，因此表单元素（例如按钮）是 UI 元素（例如网格）的子元素。以这种方式在子项（表单元素）和父项（表单）之间同步数据的最简单方法是什么。

目前，如果一个子组件位于另一个子组件中，我使用 2 个回调向上游传递数据，但这似乎效率不高。还有其他方法吗？

标签： reactjs