我如何共享相同的表单来创建和更新中继现代(实验)中的对象?
How can I share the same form for creating and updating an object in relay-modern (experimental)?
我是中继的新手,我正在尝试在并发模式下使用中继现代实验。我已经能够使用 Suspense 和 ErrorBoundary 加载节点、边缘等。我现在正在处理用于创建和更新对象的表单。
我不知道如何对创建和编辑案例使用相同的表单,因为我无法在创建案例中加载片段——其中设置了表单字段的初始值默认值。在 create 案例中,我没有任何东西可以传递给 useFragment。
如何创建一个符合表单所需片段定义的初始值?也许有一种我不知道的模式。我肯定错过了什么。我不想复制表单 UI 组件。
我认为在 React 中使用中继存储来驱动表单没有意义,因为它真的很复杂:例如,在创建的情况下,您需要将表单中的数据写入一些临时的用于标识存储中节点的 ID,然后告诉片段容器读取该节点上的字段。然后,在创建或编辑的情况下,在您的表单输入更改事件处理程序中,您将使用 commitLocalUpdate()
API 更新该节点。这变得非常复杂。
无论您是创建新节点还是编辑现有节点,编辑表单的一个更简单的模式是在 React 组件 (useState()
) 中使用状态驱动表单,然后持久化 (完成编辑后使用 Relay 创建或更新)。在编辑现有节点的情况下,您最终会从中继存储中“分叉”状态,使用表单修改它,然后持久化它。然后,当变更完成时,您可以通过 updater
函数或从变更回复中的字段更新商店。
我是中继的新手,我正在尝试在并发模式下使用中继现代实验。我已经能够使用 Suspense 和 ErrorBoundary 加载节点、边缘等。我现在正在处理用于创建和更新对象的表单。
我不知道如何对创建和编辑案例使用相同的表单,因为我无法在创建案例中加载片段——其中设置了表单字段的初始值默认值。在 create 案例中,我没有任何东西可以传递给 useFragment。
如何创建一个符合表单所需片段定义的初始值?也许有一种我不知道的模式。我肯定错过了什么。我不想复制表单 UI 组件。
我认为在 React 中使用中继存储来驱动表单没有意义,因为它真的很复杂:例如,在创建的情况下,您需要将表单中的数据写入一些临时的用于标识存储中节点的 ID,然后告诉片段容器读取该节点上的字段。然后,在创建或编辑的情况下,在您的表单输入更改事件处理程序中,您将使用 commitLocalUpdate()
API 更新该节点。这变得非常复杂。
无论您是创建新节点还是编辑现有节点,编辑表单的一个更简单的模式是在 React 组件 (useState()
) 中使用状态驱动表单,然后持久化 (完成编辑后使用 Relay 创建或更新)。在编辑现有节点的情况下,您最终会从中继存储中“分叉”状态,使用表单修改它,然后持久化它。然后,当变更完成时,您可以通过 updater
函数或从变更回复中的字段更新商店。