Redux Form：从外部包装的组件访问 FieldArray 字段道具答案

【问题标题】：Redux Form: Accessing FieldArray fields prop from outside wrapped componentRedux Form：从外部包装的组件访问 FieldArray 字段道具
【发布时间】：2019-01-14 16:32:17
【问题描述】：

我有一个由几个经典字段和两个 FieldArray 组成的表单。这些 FieldArrays 在单独的部分中，但相互关联。当我向 FieldArray A 添加一个项目（一行不同类型的字段）时，应该为 FieldArray B 构建另一行。 FieldArray A 和 B 在某种意义上是不同的，它们代表不同的字段集合和结构，但是，当将一行添加到 A 中时，必须将一行添加到 B 中。

为了向 FieldArray A 添加一行，我按照文档中的方法使用 push 方法进入属性字段，在 FieldArray A 的包装组件内。但是我无法访问FieldArray B 的 prop 字段。该 prop 只能从 FieldArray B 内的包装组件内访问。

是否有其他方式或方法可以从外部访问 FieldArray B 的 prop 字段？ formValues() 或 formValuesSelector() 没用。

【问题讨论】：

你能包含你的代码吗？我想您需要将 A 和 B 都包装在 HOC 中，并将 A 和 B 的处理程序绑定到 HOC，因此允许 HOC 控制两者的状态。但是查看表单的实际结构将有助于更好地理解问题
@AdamJohnston 没关系在挖掘和挖掘 redux-form 的非文档化方法之后，我发现库的动作创建者arrayPush 当你传递参数formId、字段和值时......它以编程方式将一个新值推送到字段数组中。我将发布一个自我答案。还是谢谢！

标签： reactjs redux-form react-redux-form

【解决方案1】：

好的，所以在挖掘了 redux-form 的文档以了解隐藏功能之后......我发现你可以从 redux-form 导入它的动作创建者，特别是 arrayPush，它可以让你 push通过像这样指定 formid、fieldarray 名称和值来创建新的“行”字段：

给定一个 id 为“myForm”的 redux-form、一个名为“nested_model_attributes”的FieldArray 和一个value = [subfield1: 'A', subfield2: 2, ... ]

您可以发送以下内容：

arrayPush('myForm', 'nested_model_attributes', value)

瞧... FieldArray 添加了新的字段行:)。在这种情况下，这是我在原始问题中所指的 FieldArray B。我需要做的就是分派这个方法，从那里我将一行新字段推送到 FieldArray A。

【讨论】：

感谢您引导我找到解决此问题的@tommyalvarez！我在直接访问 arrayPush 动作创建者时遇到了一些问题。我在这里写了博客：calendee.com/2018/09/22/adding-to-redux-form-fieldarray
我的 RF 版本不能正常工作，所以我最终像这样，因为动作创建者是普通对象：const arrayPush = () => ({ type: '@@redux-form/ARRAY_PUSH', meta: { form: 'wpTypes', field: 'types' }, payload: {} });