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

Question

请参阅 React 最终形式的文档 here

我正在处理一个显然由 React final form 提供支持的表单。在表单组件中，我从 API 服务器获取数据，响应正文包含如下内容：

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

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

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

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

Answer 1

我认为答案是 Final Form 不支持带点的键。 Final Form 需要一些方法来知道何时更深入地了解表单值对象。

我能想到的唯一解决办法是以某种方式告诉 Final Form 使用 另一个 字符（类似于你在做 search-and-replace 在 VIM) 作为 "dot"。因此，您可以将您的显示名称称为 <Field name="configs/display.name" delimiter="/"/>，但这感觉像是一个非常极端的情况。

从长远来看，我希望允许为每个领域提供一个 type-safe get/set 镜头，这也可以解决这个问题。

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

Answer 2

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

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

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

    return ac
  }, {})
)

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

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

Is there a way to disable the nested field name feature in react final form?

javascript

reactjs

final-form

react-final-form