有没有办法在反应最终形式中禁用嵌套字段名称功能？答案

【问题标题】：Is there a way to disable the nested field name feature in react final form?有没有办法在反应最终形式中禁用嵌套字段名称功能？
【发布时间】：2019-06-06 08:43:21
【问题描述】：

请参阅 react final form 的文档here

我正在研究一个显然由 react final 形式提供支持的表单。在表单组件中，我从 API 服务器获取数据，响应正文包括以下内容：

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

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

我知道我可以用下划线之类的东西更改这些点 (.)，它会起作用。但问题是我们的后端开发人员说使用点 (.) 来分隔键名在后端非常常见，因此无法选择用其他分隔符替换点。

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

【问题讨论】：

访问带点的键会出现Uncaught TypeError: Cannot read property of undefined 之类的错误，但您可以访问带点的键，例如obj.configs['display.name'] 和obj.configs['read.only']。
. 是一个特殊字符，不仅在最终形式中，而且在角形式中，它用于获取或设置嵌套字段。除了转义这个值之外，除了不使用最终形式之外没有其他选择，因为整个 api 都围绕着点是特殊的概念。我唯一能建议的就是编写一个可靠的辅助方法。
感谢@AvinKavish 的评论！是的，我们现在正在使用辅助方法将点替换为下划线。只是想知道是否有更好的解决方案。

标签： javascript reactjs react-final-form final-form

【解决方案1】：

我认为答案是最终形式不支持带点的键。 Final Form 需要某种方式来了解何时更深入地了解表单值对象。

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

从长远来看，我希望允许为每个字段提供类型安全的获取/设置镜头，这也将解决此问题。

希望我有更好的消息告诉你...?

【讨论】：

【解决方案2】：

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

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

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

    return ac
  }, {})
)

这在用户体验方面可能不是最佳的，但由于问题及其解决方案处于同一开发范围内，因此更易于维护。

【讨论】：