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

我有一个使用 final-form-arrays 的表单。表单有效并且验证有效，但是，当我在组件内部进行状态更改时，它会重置我的所有值。

我能够使用 react-final-form-arrays 提供的相同示例复制该问题：

https://codesandbox.io/embed/react-final-form-field-arrays-om6p6

我添加了一个按钮来切换状态更改。本质上，只需尝试在表单中填写值，然后更改状态。表格将重置，我不知道为什么会这样。如果我删除 initialValues，这不会发生。

有谁知道为什么会这样？

在我正在开发的应用程序中，有一个用于进行调查/民意调查的模块。后端已经编程好了，基本上有一个端点可以接受主体中的一个复杂对象，然后它会构建轮询。复杂对象可以根据投票和问题类型而有所不同，有些是多项选择，有些是投票，有些是开放式的。我正在尝试构建这样的复杂对象的示例：

所以本质上，该对象具有称为问题的 fieldArray，其中包含问题对象。但是，如果是多项选择题，这些问题对象也可以包含选项数组，并且每个选项都有 2 个潜在字段，选项文本和选项描述。

一般而言，仅使用 onefield 数组和可用的 mutator push，我就可以推送一个完整的问题对象，目前硬编码到一个像这样传递的变量中：push('questions',sampleQuestion1)按下按钮时。

由于问题数组已经包含选择 [] 数组，因此该表单将起作用，但是，我无法以与 FieldArray 的顶层相同的方式在其他数组中呈现选择数组的值

这就是基本实现的样子

我尝试在另一个 fieldarray 中放入一个组件，这当然是相当幼稚的，我很快发现 push mutator 已经用添加的数据调用了，并且我无法映射选择的字段，因为传入的 question 对象父母fields.map实际上并不是问题对象本身。

我已经尝试了一些其他技术并且已经阅读了文档，但我有点难过。如果有人可以帮助我弄清楚这是否可能，我将非常感激

我有一个应用程序，用户可以根据需要添加任意数量的文本字段并输入他们的汽车名称（我通过 FieldArray 轻松完成）。

现在的问题是我需要一个编辑页面，用户可以在其中查看他们在添加页面中输入的所有汽车并能够对其进行编辑。我需要再次渲染 FieldArray 并使用 InitialValues 之类的东西。

因此，例如，如果用户在“添加”页面中创建了 5 辆汽车，当他/她进入“编辑”页面时，我希望看到通过 FieldArray 创建的 5 个输入，其中包含汽车的名称。 怎么做？

我有自定义 mutators 来处理 react-final-form 中的 Slider 值更改，例如这个示例。但是，我想要一个在向导中生成 Field/FieldArray 的函数，例如这个例子。在 FieldArray 渲染函数中，我可以从 fields 变量访问 arrayMutators 和另一个自定义 mutator。我在 Field 的输入变量中找不到这些变异器。

有没有办法从父级访问向导中的输入或访问 form.mutator 中的自定义增变器？

我想触发一个 API 调用来获取一些补充数据并将其显示在我的最终反应形式旁边。最好的方法是什么？

我已经开始使用OnChangefrom react-final-form-listeners 来监听字段更改并进行 API 调用，但我真的不知道如何将这些数据存储在某处并将其显示在 react-final-form 框架中. 使用一个函数组件和一个状态钩子，这将是相对简单的，因为我只需设置一个变量的状态，然后将它显示在同一个组件的某个位置。这是否表明我应该将这些东西存储在 redux 中？我可以用钩子代替吗？

我分叉了其中一个示例并添加了我想要做的事情：

https://codesandbox.io/embed/react-final-form-field-arrays-k9pqm

我想在一个表单中创建、替换和删除 3 个图像。我正在使用react-final-form，只是想知道我将如何做到这一点？我可以在页面上获得三个文件输入，但要弄清楚如何更新数组中的每个文件或删除它们。

我希望我的初始值是这样的：

然后上传一张图片

我FieldArray在 React Final Form 中设置组件的 initialValue 时遇到问题。当我在Form组件上设置它时它可以工作，但在FieldArray. 请参阅下面的 CodeSandbox 示例：

在 FieldArray 上： https ://codesandbox.io/s/react-final-form-field-arrays-vq9pz

在表单上： https ://codesandbox.io/s/react-final-form-field-arrays-v90nn

我希望将它设置在 FieldArray 上，如果我查看此处的文档，这似乎应该是可能的。有没有其他人遇到过这个？

我正在使用react-select和react-final-form用于条件下拉菜单，其中第二个选择的选项由<PickOptions/>基于第一个选择的值的组件提供（感谢这个 SO answer）。

这是组件：

当第一个选择的值更改时，它会清除第二个选择changeB(undefined)。我还通过传递将第二个选择设置为数组中的第一个选项initialValue。因为我需要从状态中初始化值，所以我最终得到了以下代码：

但它不起作用。来自状态的初始值不会传递给由 呈现的字段<PickOptions/>。如果我从组件中删除changeB(undefined)，则传递值，但是当第一个选择的值更改时（即使选项已更新），第二个选择的输入值不会更新。这是我的代码框的链接。

我该如何解决？

浏览此代码并添加客户并删除它。它给出了一个错误。

https://codesandbox.io/s/array-fields-7x1n3

我有一个使用 ag-grid 构建的最终形式的支持网​​格。Ag-grid 采用渲染，在我的情况下是用 FormSpy 包装的字段。使用 final-form 的 pre-hooks 版本可以工作，但我遇到了一些问题，所以我升级到最新版本并收到“[X] 必须在组件内部使用”错误。

我使用了 react devtools，果然，我的自定义字段渲染器/编辑器被移出上下文作为树末端的叶子。我的问题是，是否有任何解决方法可以使这项工作？有没有办法订阅特定的上下文？我知道有点反模式，但我的想法很少。

例子

这是具有较旧最终形式包的版本- https://codesandbox.io/s/final-form-ag-grid-lbq7f