前端开发，遇到 UI 完全一致，但是数据结构完全不一致的情况，怎样处理才更易维护更加优雅呢

[mouyase]

比如说现在有一个带图片的列表页面(类似小红书主页，B 站主页等)，然后项目中同时有 N 个相似的页面。

但是可能组件 A 的数据结构为

[
    {
        "name": "数据 1",
        "url": "https://a.cn/1.jpg"
    },
    {
        "name": "数据 2",
        "url": "https://a.cn/2.jpg"
    },
    {
        "name": "数据 3",
        "url": "https://a.cn/3.jpg"
    }
]

B 组件的结构可能为

[
    {
        "title": "数据 1",
        "cover": {
            "url": "https://a.cn/1.jpg"
        }
    },
    {
        "name": "数据 2",
        "cover": {
            "url": "https://a.cn/1.jpg"
        }
    },
    {
        "name": "数据 3",
        "cover": {
            "url": "https://a.cn/1.jpg"
        }
    }
]

类似这种不同的数据。

而且不同的页面里面可能也会带有不同的交互。

因为项目里面有很多这种 UI 类似，功能类似，但是接口数据结构不同的组件。 所以请问有什么好办法比较容易的处理这种数据吗。

[Helsing]

Clean 架构了解一下

[BoomMan]

jsonpath

[ClericPy]

适配器模式?

[P233]

保持组件数据一致， 请求完数据后先处理一下再传给前端组件

[Rocketer]

前端应有自己的模型，后端来的数据都处理成自己所需的样子。

[ChefIsAwesome]

list 和 item 要分开。比方说拆成 <ListItem> 这么一个组件，它收的 props 是 name 和 url 。在你这个例子里，ListItem 处理真正的 ui ，List 是处理数据请求、循环的逻辑。
解决功能类似这个问题，要看你真正变化的部分有多少。变化少，那通过参数控制显示就可以了。变化多，那就要考虑是不是靠 slot 提供接口，是不是要再拆成更小的组件。本质上就是老生常谈的组合还是继承的问题。

[mouyase]

P233 @Rocketer 就是在数据请求回来时候重新做数据拼装然后在传递给 UI 组件吗，这样会不会导致数据转换地狱呢，一串数据在不同的组件传递的时候经过了 N 多次转换之类的。请问有没有什么好的数据转换的方法呢（ js/ts)

[mouyase]

@BoomMan 这种是不是写的时候还是得组件根据各种不同的数据源来进行判断，再取值呢

[K120]

适配器，在 service 层处理

[shizhibuyu2023]

容器组件处理数据，统一格式后传入展示组件，这不是基本功吗

[MorJS]

1.组件中处理一下,2.干后端

[Adelell]

api 给的数据必须洗一遍，不然不放心。

[Adelell]

洗数据是个技术活，做的好无论接口怎么变，前端都能自动适配。

[mouyase]

@Adelell 所以有什么好的方案用来做数据清洗吗

[mouyase]

@shizhibuyu2023 API 这边现在给的数据比较乱，字段又多又杂，而且不同的应用场景同一个字段也会有不同的用途，所以一直都没有想到一个比较优秀的统一处理方案

[Adelell]

洗数据最好的办法是调用 gpt4 的接口，先告诉 gpt 自己需要的目标格式，然后把 api 的原数据发给 gpt 帮你转换成目标格式

[mouyase]

@Adelell 说实话我们的数据有些问后端都不知道这个字段是干嘛的或者怎么解释，我们前端也很难用语言描述，感觉接 GPT 可能也没那么现实……

[Adelell]

简单的话就把原始格式和目标格式告诉 gpt ，让 gpt 写个 function 处理下

[Rocketer]

@mouyase 地不地狱的都不能相信别人给你的数据，你的数据必须是自己的

[DimitriYoon]

都已经设计成这样了，你怎么做也优雅不了了吧...

[mouyase]

@DimitriYoon 后入场的项目没办法（

[BoomMan]

@mouyase 组件仅考虑输入输出，具体在什么时候转换，是生产关系决定的，jsonpath 可以配置化的很好解决这个问题。