比如说这种情况，从后端请求一个接口，然后返回的值里面有部分需要重新组装成前端需要的格式，而有部分又不需要，这时就会有很长的一段代码，如下：

const data = await getShopDetail({id})
let detail = {}
// 下面只给出了几种情况，实际是有更多的情况的
// 不需要改动
detail.name = data.name

// 这里处理时间
detail.created_at = day(data.created_at)

// 一些判断处理
detail.status = data.status.toString() ? data.status.toString() : ''

// 判断有没有时间然后再处理
if (data.cosume_times) {
  const [start, end] = data.cosume_times.split('-')
  detail.cosume_times_start = day(start, 'HH:mm')
  detail.cosume_times_end = day(end, 'HH:mm')
}

// 做图片处理
detail.img = data.img ? JSON.parse(data.img) : []
detail.img.forEach((item, index) => {
  ...
})

// 数组里面做一些运算处理
data.info.forEach(item => {
  if (item.type === 1) {
    detail.count = item.count
    detail.rate = NP.divide(item.rate, 100)
    if (item.food_type === 1) {
      detail.price = NP.divide(item.price, 100)
      detail.weight = NP.divide(item.weight, 100)
    } else {
      ...
    }
  } else {
    ...
    if (item.food_type === 1) {
      ...
    } else {
      ...
    }
  }
})

// 做一些运算处理
detail.profit = data.profit !== '' ? NP.divide(data.profit, 100) : ''

this.setState({
  detail
})

相应的获取详情之后编辑提交的时候肯定也会有如上类似的处理组装成后端需要的格式，同样也是一大段类似的代码，请问大佬这种该怎么优化呢？

有一大堆名称很像的工具库：BeanUtils，其实没办法解决真正的痛点。。。

前端最好不处理数据 都是让后端处理的..

我很好奇 data.img 返回的是个字符串吗 竟然需要 JSON.parse 这不应该呀

对不起，找不到对象！

dirty work 逃得掉吗？逃不掉！其实就是比较烦人，不一定会耗费很多时间。
我比较推荐前端定义自己的 view model，然后和后台交互的时候转换一下，这样比较 flexible

你写后端也会有这个问题， 在前端看来是一个接口， 其实后端调用了 N 个外部接口+N 个数据库查询然后再组装计算出来的。 只要是系统集成对接就会有这个问题， 所以， 慢慢写喽。
至于说让后端把数据处理好给前端？？一个接口写 N 次就是为了小程序和安卓 UI 上一个字段的格式不同？？？

后端接口要具有一定的抽象， 把一些共性的东西确定好， 把一些通用的东西规范化， 这样才能足够灵活。

比如说一个日期格式， 小程序端需要显示 20190101， 安卓端需要显示 2019/01/01, 后端需要把这个抽象出来，然后规范化： 返回一个日期 2019-01-01，至于说怎么展示， 那么每个客户端都按照自己的需要去格式化就好了，后端只需要保证数据是能够覆盖客户端的需求就好了

但我觉得引入工具库又额外增加成本了。。
但是后台传过来的数据总还是需要进行处理，可能没有我例子那么多罢了
就是字符串。。。
其实根本的解决方法的确是这样的，只是就目前来看是不可能了，所以就想看看有没有什么好一点的写法
谢谢指点！

是这样的 看你和后端能不能沟通了...
反正至少要有一方的代码是这样的
或者两方都是
因为后端 很多的数据也是 数据库查询拼接 然后转换给你的..
我之前写的接口 基本都是 让前端当傻瓜 直接拿值显示就行了..
不过作为成长 个人觉得还是 更多的学习处理数据 会带来提高 (因我认识个哥们 直接数据库查出来就抛出来了 前端自己想办法)

如果后端没法改的话，这也是没办法的。我觉得后端应该尽可能简单一些，把该传的字段都传了就行了，至于怎么用那是前端的事情。

后端返回基本而且通用的数据格式，前端进行处理。

一般我会把接口数据按后端给的结构放在 model 层，方便更新和提交，
然后在 viewModel 层转换成需要的格式用于显示和交互。
对 redux 来说 model 层就是 store，vm 就是 reselect
对 vue 来说就是 data / computed

这种情况还是用`useMemo`的 hook 吧