这是一个创建于 237 天前的主题，其中的信息可能已经有所发展或是发生改变。
比如说现在有一个带图片的列表页面(类似小红书主页，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 类似，功能类似，但是接口数据结构不同的组件。 所以请问有什么好办法比较容易的处理这种数据吗。
22 条回复 • 2024-04-08 22:20:53 +08:00
 |
1
Helsing 237 天前 via iPhone
Clean 架构了解一下
|
 |
2
BoomMan 237 天前
jsonpath
|
 |
3
ClericPy 237 天前  1
适配器模式?
|
 |
4
P233 237 天前
保持组件数据一致， 请求完数据后先处理一下再传给前端组件
|
 |
5
Rocketer 237 天前 via iPhone
前端应有自己的模型，后端来的数据都处理成自己所需的样子。
|
 |
6
ChefIsAwesome 237 天前
list 和 item 要分开。比方说拆成 <ListItem> 这么一个组件，它收的 props 是 name 和 url 。在你这个例子里，ListItem 处理真正的 ui ，List 是处理数据请求、循环的逻辑。
解决功能类似这个问题，要看你真正变化的部分有多少。变化少，那通过参数控制显示就可以了。变化多，那就要考虑是不是靠 slot 提供接口，是不是要再拆成更小的组件。本质上就是老生常谈的组合还是继承的问题。 |
 |
7
mouyase OP P233 @Rocketer 就是在数据请求回来时候重新做数据拼装然后在传递给 UI 组件吗，这样会不会导致数据转换地狱呢，一串数据在不同的组件传递的时候经过了 N 多次转换之类的。请问有没有什么好的数据转换的方法呢（ js/ts)
|
 |
9
K120 237 天前
适配器，在 service 层处理
|
 |
10
Xu3Xan89YsA7oP64 237 天前
容器组件处理数据，统一格式后传入展示组件，这不是基本功吗
|
 |
11
43n5Z6GyW39943pj 237 天前
1.组件中处理一下,2.干后端
|
 |
12
Adelell 237 天前 via iPhone
api 给的数据必须洗一遍，不然不放心。
|
|
13
Adelell 237 天前 via iPhone
洗数据是个技术活，做的好无论接口怎么变，前端都能自动适配。
|
|
15
mouyase OP @shizhibuyu2023 API 这边现在给的数据比较乱，字段又多又杂，而且不同的应用场景同一个字段也会有不同的用途，所以一直都没有想到一个比较优秀的统一处理方案
|
|
16
Adelell 237 天前 via iPhone
洗数据最好的办法是调用 gpt4 的接口，先告诉 gpt 自己需要的目标格式，然后把 api 的原数据发给 gpt 帮你转换成目标格式
|
|
18
Adelell 237 天前 via iPhone
简单的话就把原始格式和目标格式告诉 gpt ，让 gpt 写个 function 处理下
|
 |
20
DimitriYoon 236 天前
都已经设计成这样了，你怎么做也优雅不了了吧...
|
|
21
mouyase OP @DimitriYoon 后入场的项目没办法（
|
Select Language