Question

请参阅对最终表单的文档进行here

我正在处理一个显然由React最终表单提供支持的表单。在表单组件中，我正在从API服务器中获取数据，响应主体包括以下内容：

{
  "configs": {
    "name": "abc",
    "display.name": "Abc",
    "value": 12,
    "read.only": true
  }
}

我们可以看到configs中有四个不同的键/值对。 react最终形式可以很好地显示name和value之类的值，但不能显示display.name和read.only之类的值，因为它们的键中有一个点-> .

我知道我可以使用下划线等方式更改这些点（.），并且可以使用。但是问题是我们的后端开发人员说后端使用点（.）来分隔键名是很常见的，因此用其他分隔符代替点将不是一种选择。

我目前正在前端用下划线替换这些分隔符，但是这种逻辑无处不在，我认为应该有一种更好的方法来解决。谢谢！

Answer 1

我认为答案是最终形式不支持带点的键。 Final Form需要某种方式来知道何时进一步深入表单值对象。

我能想到的唯一解决方案是以某种方式告诉最终表单使用另一个字符（）（类似于在VIM中进行搜索和替换时如何选择其他“分隔符”字符）作为“点”。因此，您可以将显示名称命名为<Field name="configs/display.name" delimiter="/"/>，但这感觉就像是一个极端的情况。

长期来说，我想允许为每个领域提供一种类型安全的获取/设置镜头，这也将解决此问题。

希望我对你有个好消息...?

Answer 2

由于同时使用了严格的后端命名和Final Form点键嵌套表示法，除非您可以更改这两个参数之一，否则我认为用下划线替换点仍然是最简单的解决方案。这实际上与编码本身无关，因为基本上有3种情况：

摆脱最终形式并找到一个新的形式，这可能会很昂贵，尤其是当您有多个开发人员从事此项目时。海事组织不值得学习新语法的成本，这增加了处理新的边缘情况的复杂性。
从后端编写自定义视图。您可以要求后端开发人员为表单开发自定义视图集，以便他们可以在内部保留其点符号。这通常是一个坏主意，因为它很容易造成技术负担，而开发团队的一方却不知道为什么存在特定的方法。
最好的还是你所做的。由于前端需要特殊的响应格式，因此前端要适应后端发送的内容，因此创建了一个自定义的中间件功能，可将其应用于每个传入的响应，例如：

const JSONMiddleware = input => ( 
  Object.entries(input).reduce((ac, cv) => {
    const newKey = cv[0].replace('.', '_')
    ac[newKey] = cv[1]

    return ac
  }, {})
)

就用户体验而言，这可能不是最佳选择，但由于问题及其解决方案属于同一开发范围，因此维护起来更容易。

有没有办法以React最终形式禁用嵌套字段名称功能？

2 个答案: