简单的前端数据映射案例

定义 (前端数据映射): 把后台数据转换成前端自定义的数据格式

为什么要有数据映射？为了复用组件，但是每一个组件复用时传递的数据不同，所以要将后台数据转换为自定义数据格式

 

实例代码：

import React, { Component } from 'react'
import _ from 'lodash'

// 模拟后台数据
const result = [
  {
    id: 1,
    title: '小花',
    xxx: 12000,
    bbb: '男',
    cb: v => `@${v}`,
  },
  {
    id: 2,
    title: '小白',
    xxx: 27000,
    bbb: '女',
    cb: v => `@${v}`,
  },
]

export default class Cart extends Component {
  render() {

    // 数据映射一般都写在 redux 里面，或者单独的 js 文件
    // 这里使用的是 lodash 工具库的 get 方法
    // _.get(object, path, [defaultValue])
    // 根据对象的path路径获取值，如果解析 value 是 undefined 会以 defaultValue 取代

    const data = result.map(item => ({
      id: _.get(item, 'id', ''),
      name: _.get(item, 'title', ''),
      price: _.get(item, 'xxx', ''),
      sex: _.get(item, 'bbb', ''),
      cb: v => `@${v}`
    }))

    return (
      <div className="pages-cart">
        <h1>cart</h1>
　　　　　// 映射后的数据进行渲染

        {
          data.map(({name, id, price, sex, cb}) => {
            return <p key={id}>{cb(name)}-{cb(price)}-{sex}</p>
          })
        }
      </div>
    )
  }
}