代码块-常见业务场景

此文用于我的总结、收集平常工做中常见的业务代码，以此提升自身效率

场景react和dva

---

发送两个相互依赖的异步请求

• 在dva中，采用的是基于redux-saga的异步解决方案，将异步请求所有收集到effects中进行统一处理。所以：
  • 咱们能够在获取到一个yield call(fetchDataAsync, payload)的结果res后，以此res为payload，继续put另外一个异步action；
  • 或者是干脆在后面直接跟yield call(fetchDataAsyncAnother, payload)；
  • 在dispatch第一个异步action时，除了常见的type、payload外，咱们还能够传入一个callback，在获取到请求的结果res后，使用yield调用该callback，并将res看成参数传入，在callback中，发起另外一个异步action，以下：

// page.js
fetchData = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'page/fetchData',
      payload: { pageNumber: 1, pageSize: 30 },
      cb: (list) => {
        // fetchAnotherData
      },
    })
}

// models/page.js
effects: {
    *fetchData({ payload }, { call, put }) {
        const res = yiela call(fetchFn, payload)
        const arr = Array.isArray(res.content) ? res.content : []
        yield put({
            type: 'changeStore',
            payload: {
                arr
            }
        })
        yield cb && cb(arr)
    },
}
复制代码

---

页面某些内容发生改变后从新发送异步请求获取数据

• 随着React版本的更新，已经不推荐在componentWillReceiveProps里发送异步请求了。目前我的的编码中，若有相似的需求场景，已所有转移到componentDiaUpdate中从新发送异步请求

---

经过某个id组成的数组，在另外一个总的对象数组里查找对应数据。常见于各类下拉框联动。

好比一个"项目"下拉选择器和一个“项目参与者”下拉选择器；在没有选择项目的时候，加载全部的参与者；而一旦选择了某个项目，则只显示对应的参与者。其实引伸一下，就是一个数组求交、并集的问题

const projectListId = [1]
const memberList = [
    {projectId: 1, name: '小明', id: xxx},
    {projectId: 1, name: '小黑', id: xxx},
    {projectId: 2, name: '小黄', id: xxx},
    {projectId: 3, name: '小红', id: xxx},
    {projectId: 4, name: '小白', id: xxx}
]
const res = memberList.filter(member => projectListId.indexOf(member.projectId) > -1)
console.log(res) 
// [{projectId: 1, name: '小明', id: xxx}, {projectId: 1, name: '小黑', id: xxx}]
复制代码