请在此处查看 react Final Form 的文档
我正在研究一种显然由反应最终形式提供支持的形式。在表单组件中，我从 API 服务器获取数据，响应正文包含以下内容：
{
"configs": {
"name": "abc",
"display.name": "Abc",
"value": 12,
"read.only": true
}
}
正如我们所看到的，configs中有四个不同的键/值对。 react final form 可以显示像name和value这样的值，但不能显示像display.name和read.only这样的值，因为它们的键中有一个点 ->.。
我知道我可以用下划线之类的东西更改这些点(.)，它会起作用。但问题是我们的后端开发人员说使用点(.)来分隔键名在后端中非常普遍，因此用其他分隔符替换点将不是一种选择。
我目前正在前端用下划线替换这些分隔符，但这种逻辑无处不在，我认为应该有更好的方法来解决这个问题。谢谢！
我认为答案是Final Form不支持带点的键。Final Form 需要某种方式来知道何时更深入地了解表单值对象。
我能想象到的唯一解决方案是以某种方式告诉Final Form使用另一个字符(类似于在VIM中进行搜索和替换时如何选择不同的"分隔符"字符)作为"点"。因此，您可以将显示名称称为<Field name="configs/display.name" delimiter="/"/>，但这感觉像是一个非常极端的边缘情况。
从长远来看，我想允许为每个领域提供一个类型安全的获取/设置镜头，这也将解决这个问题。
希望我有更好的消息告诉你...😢
由于您同时被严格的后端命名和最终形式点键嵌套符号锁定，除非您可以更改这两个参数之一，否则我想用下划线替换点仍然是最简单的解决方案。 这真的与编码本身无关，因为基本上有 3 种情况：
- 摆脱最终形式并找到一个新的，这可能会很昂贵，特别是如果您有多个开发人员在这个项目上工作。学习新语法的成本，加上处理新边缘情况的复杂性，不值得IMO。
- 从后端编写自定义视图。您可以要求后端开发人员为表单开发自定义视图集，以便他们可以在内部保留其点表示法。这通常是一个坏主意，因为它很容易产生技术债务，开发团队的一方不知道为什么存在特定方法。
- 最好的仍然是你所做的。由于前端需要特殊的响应格式，因此前端关注的是适应后端发送的内容，因此创建一个自定义中间件函数，您可以将其应用于每个传入响应，例如：
const JSONMiddleware = input => (
Object.entries(input).reduce((ac, cv) => {
const newKey = cv[0].replace('.', '_')
ac[newKey] = cv[1]
return ac
}, {})
)
就用户体验而言，这可能不是最佳的，但由于问题及其解决方案处于相同的开发范围内，因此更容易维护。