簡單的前端數據映射案例

定義 (前端數據映射): 把后台數據轉換成前端自定義的數據格式

為什么要有數據映射？為了復用組件，但是每一個組件復用時傳遞的數據不同，所以要將后台數據轉換為自定義數據格式

 

實例代碼：

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>
    )
  }
}