问题标签 [react-final-form-arrays]

我将输入数据发布到 API，其中 API 的结构作为具有 n 个对象的数组列表。

问题：我面临的问题是在处理更改时，我正在替换数据而不是作为另一个对象插入。

我的代码如下：

列表中的对象是动态的，不限于两个

在构造函数->

处理变更如下：

处理提交：

表单字段如下：

我知道错误是在处理逻辑，但我尝试了很多来纠正。请帮帮我。

编辑：预期输出：

我有一个场景，我有多个网格，每个网格中可以有多个可以删除的行。

我想做类似<FieldArray name="document[0]">的事情，我可以给网格添加和删除功能，但似乎 fieldarray 只需要单个节点。有解决办法还是我做错了什么？

最初我有document1: { [{...fields}] }这么 useField 看起来像这样：

但由于 ag-grid 和单元级别验证的问题，我想使用 yup 模式验证，所以我认为如果我使用通用键会更容易。

我正在努力用 ag-grid 创建一个可编辑的网格。我发现在使用react-final-form-array 删除行时，同时使用具有 useField的渲染器和编辑器会产生问题。

请记住，渲染器是单元格的只读/正常状态，而编辑器是编辑视图；编辑器仅在编辑时呈现。

https://codesandbox.io/s/infallible-violet-joej4?file=/src/App.js

在上面的示例中，您会看到我已经注释掉了渲染器和验证规则。注释掉渲染器会阻止我显示验证错误——最重要的是，ag-grid 会破坏 useField，因此我的验证也会丢失。

天真地，我认为表单验证而不是字段验证是要走的路，但同样，我仍然需要自定义渲染器来显示验证或元数据。

然后我想创建一个包含所有 useField 单元格的二维数组，但这会导致“渲染的钩子比上一次渲染时更多”。错误。我不精通钩子，但我也看不到<Field>工作。

想法？

我正在尝试根据具有填充内容的初始数据从组创建动态，并从组中添加/删除。不幸的是，它不起作用。

预期的行为是，

• Coutry 下拉菜单将加载数据并突出显示已正常工作的选定值。
• 默认情况下，应使用初始数据中的选定值加载选定的国家/地区下拉数据，stateCode并且在更改当前不起作用的国家时也应加载。
• 单击添加按钮时，默认情况下应加载“美国”国家和相应州的数据。状态下拉菜单应默认选择“--select--”。

注意：所有数据将来自 API。测试目的我为国家和州添加了静态对象。

这是我的尝试

https://stackblitz.com/edit/angular-8-app-example-fkjzfe-wekubn?file=src%2Fapp%2Fapp.component.ts

当前行为演示

https://angular-8-app-example-fkjzfe.stackblitz.io/

HTML

TS

在 React-Admin 中，我有一个要管理的项目，它看起来有点像这样：

标签作为主要项目内的对象列表给出。

我希望能够对此进行管理，但我在编辑视图中的代码是错误的：

这不起作用，因为 ReferenceArrayInput 期望record.tags是标签外键列表。它实际上是一个标签列表（因此我们实际上不必查找任何内容）。它也失败了，因为它返回的是一个外键列表——而 API 只是期望返回一个标签对象列表。

我们可能会争辩说 API 设计得很糟糕，但是 React Admin 可以适应吗？

有没有办法让我在将这些记录输入 ReferenceArrayInput 之前将它们转换为外键 ID 列表，然后在将它们发送回 API 之前执行相反的操作？或者，我可以更改 API，以便它只返回外键而不是实际的标签对象。

我正在使用自定义组件来显示文本输入字段，没有什么特别的，只是基本组件

当我出于某种原因尝试在 react-final-form-array 中使用此组件时，我在输入字段上键入时失去了焦点，我想这是因为重新渲染。

这是codesandbox上完整代码的链接

如您所见，“名字”工作正常，但“姓氏”在键入时失去焦点。

我该如何解决这个问题，任何帮助表示赞赏

谢谢

我在表单中使用反应最终形式和反应最终形式数组。

表单的 Pristine 部分附加到提交按钮。但是，如果我在表单中打开一个预先提交的文件，从数组中删除一个值并将相同的值放回原处，即使它是相同的，表单的原始值也不会设置回 true，是否有解决方法？

我正在使用 final-form/react-final-form-arrays 库，有没有办法按最先出现的最近字段进行排序。FieldArray 组件的 fields 属性类似于数组，但没有反向功能。因此，每次我添加一个新字段时，例如 fields.push({newObject}) 我希望该渲染组件位于列表的顶部。任何人都知道如何使这项工作？

我有一个react-admin Create要显示和填充的视图，ArrayInput但它似乎忽略了列表的数据。

我试图加载数据

并手动为其设置源，但ArrayInput似乎对向其提供一些数据的所有努力都不感兴趣。

我可以遍历数据数组并TextFields相应地渲染和删除按钮，同时留下ArrayInput用于添加新数据的按钮，但这违背了目的和与ArrayInput. 有什么我想念的吗？我应该如何传递数据以使其按预期工作？我为此制作了一个沙盒示例HERE

我设置了一个包含多个 FieldArrays 的表单。它们在不同的子组件中呈现，这些子组件也通过 props 获取表单变量和值。在每个步骤中，我都有一个 FieldArray，其名称也不同。这是父组件，它根据用户所在的步骤决定要渲染的子组件。

这将是 Step 1 子组件的内部：

这将是第 2 步子组件的内部：

在这两个子组件中，我确实有一个类似按钮的东西，看起来像这样：

让我们假设表单状态中的数据结构如下所示：

现在奇怪的事情来了。每当我从第一步填充我的 FieldArray 并继续前进时，我都能够填充并与步骤 2 的 FieldArray 交互。只有当我想实际单击按钮以从第二个 FieldArray 中删除条目时（在第二步中） ，它以某种方式从第一个 FieldArray （从第一步）中删除条目（在相同的第一/第二/第三索引处）。它真的很烦人。

此外，当我像这样调用函数时，() => console.log(fields.remove(index)它会从第一步和第一个 FieldArray 记录对象。

有没有人遇到过这种情况，或者有人看到错误在哪里？