redux重构（六）02-任务列表过滤——实现列表的筛选-从唯一的数据源当中获取状态数据即可 & 过滤当前的列表结果-给data传值state

最新推荐文章于 2021-06-20 15:13:49 发布

viceen

最新推荐文章于 2021-06-20 15:13:49 发布

阅读量160

点赞数

分类专栏： redux 文章标签：列表 filter reactjs

本文链接：https://blog.csdn.net/weixin_44867717/article/details/117969679

版权

redux 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

该博客介绍了如何在JavaScript中实现列表的筛选功能，特别是在`List.js`组件中。`filterList`函数根据`state.currentType`的值来过滤`todos`列表，展示全部、未完成或已完成的任务。同时，`mapStateToProps`函数用于计算全选按钮的状态，并通过`filterList`获取当前过滤后的列表。博客内容涉及到React的状态管理和数据过滤原理。

摘要由CSDN通过智能技术生成

任务列表过滤——实现列表的筛选-从唯一的数据源当中获取状态数据即可 & 过滤当前的列表结果-给data传值state

实现列表的筛选

src/views/List.js

function filterList (state) {
  // 过滤列表数据
  return state.todos.filter(item => {
    if (state.currentType === 'all') {
      // 全部列表
      return true
    } else if (state.currentType === 'will' && !item.done) {
      // 未完成
      return true
    } else if (state.currentType === 'done' && item.done) {
      return true
    } else {
      return false
    }
  })
}

function mapStateToProps (state) {
  // 动态计算全选按钮的状态：如果所有的条目都被选中，那么全选按钮的状态就是true,只要有一个没有选中就是false
  // 数组的方法every作用：判断数组中是否所有元素都满足条件，如果都满足就返回true，否则返回false
  let isAll = state.todos.every(item => {
    return item.done
  })
  // 过滤当前的列表结果-给上面传值state
  let todos = filterList(state)
  return {
    // 从唯一的数据源当中获取状态数据即可
    todos: todos,
    isAll: isAll
  }
}