代码块-常见业务场景

此文用于个人总结、收集日常工作中常见的业务代码，以此提高自身效率

场景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}]
复制代码

转载于:https://juejin.im/post/5caca3e5e51d456e747c52fa