2

请在此处查看反应最终形式的文档

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

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

正如我们所看到的，在configs. react final 形式可以显示类似nameandvalue的值，但不能显示类似display.nameand的值，read.only因为它们的键中有一个点 -> .。

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

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

4

2 回答 2

3

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

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

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

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

于 2019-06-11T08:54:22.610 回答
1

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

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

    return ac
  }, {})
)

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

于 2019-06-11T08:57:57.800 回答