网易云dva开发日志 day1

请你不要突然走进我的世界，又突然对我爱理不理。

(1)

报错

You should not use outside a

原因

我们在dva里直接 import { NavLink } from 'react-router-dom';了。

只能通过import { NavLink } from 'dva/router';来引入。我哭了…

(2)初次使用网易云API开发

dva的设计理念为响应式开发，即把所有的操作都丢给redux，其它组件只要dispatch()就可以了。

services下新建songlist.js

import request from '../utils/request';
//request为dva为你封装好的。
export function getTagList() {
  return request('http://localhost:3000/playlist/catlist');
}

修改model

effects: {
   *getTags(action, { call, put }) {
     const temp = yield call(songListService.getTagList, {});
     console.log('temp.data', temp.data);
     if(temp.data.code === 200) {
       console.log(temp.data.categories)
  
       yield put({
         type: 'add-tags-list',
         payload: {
           categories: temp.data.categories,
           sub: temp.data.sub,
         }
       });
     }
   }
 },

reducers

'add-tags-list'(state, { payload }) {

      const categories = [];
      for(let cat in payload.categories) {
        categories.push(payload.categories[cat]);
      }
      const sub = [];
      for(let i = 0 ; i < categories.length ; i++) {
        sub.push([]);
      }
      payload.sub.map(item => {
        sub[item.category].push({
          name: item.name,
          hot: item.hot,
        });
      });

在组件中发dispatch

componentDidMount() {

    const { getTagList } = this.props;

    getTagList();
  }
}

const mapDispatch = (dispatch) => ({
    getTagList() {
      dispatch({
        type: 'SongList/getTags',//注意getTags方法名要和effects中的方法名相同。
      });
    },
});

(3)WebStorm

问题描述

WebStorm将index.js文件默认识别为txt

解决

File — settings — FileTypes找到Text类型，

将其中的index.js格式取消，apply—Ok

(4)阻止双击选中

常规项目，我们只需要给标签加一个onselectstart事件，return false;就可以。

但是在React中，是没有onselectstart事件的。我们只需要给标签添加个样式就可以了。

.node{/*node为标签的class名*/
  -webkit-user-select: none;  
  -moz-user-select:none;  
  -o-user-select:none;  
  -ms-user-select:none;
}

(5)一个数组中包含多个对象，如何高效把所有对象中某个属性相同的对象去重

常见的一个业务请求数据

arr = [
    {
        a: '1',
        b: 'q1'
    },
    {
        a: '2',
        b: 'q2'
    },
    {
        a: '1',
        b: 'q3'
    },
    {
        a: '1',
        b: 'q4'
    },
    {
        a: '2',
        b: 'q5'
    },
    {
        a: '3',
        b: 'q6'
    }
]

//使特定属性相同(例如这里的属性‘a’)的对象去重
let O = arr.map(a => a['a']).reduce((o, k, i) => [o[k] = i, o][1], {})
Object.keys(O).map(k => {
    // 如果是要覆盖多个属性，那就这里用扩展库的 clone 方法（考虑到嵌套）把原来的复制一份然后修改 a 的值
    // 如果不嵌套，那就
    // let o = {a: k};
    // Object.keys(arr[O[k]]).forEach(key => o[key] = arr[O[k]][key]);
    return {a: k, b: arr[O[k]]['b']}
})

(6)理解ES6稍微复杂一点的解构赋值内容

解构赋值为浅拷贝

let obj = { a: { b: 1 } };
//其实就是表示对象属性a是个对象
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2

举个栗子

action = {
  type: '../..',
  payload: {
    categories,
    sub,
  }
};

{ payload: { categories, sub } } = action;

实现嵌套赋值给categories和sub，但要注意是浅拷贝。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

解构赋值必须是最后一个参数，否则会报错。

1 2	let { ...x, y, z } = someObject; // 句法错误 let { x, ...y, ...z } = someObject; // 句法错误

have a nice day