【react】页面按年份展示数据，而当年的数据不展示年份，其他需要按年份展示每一年的数据

最新推荐文章于 2023-06-27 11:18:21 发布

Nicole1.

最新推荐文章于 2023-06-27 11:18:21 发布

阅读量365

点赞数

文章标签： react.js typescript 经验分享

本文链接：https://blog.csdn.net/m0_52743009/article/details/127443068

版权

本文介绍了如何处理后端返回的按年份组织的数据，以便在页面上按年份展示，同时隐藏当前年份的数据。通过获取当前年份，然后使用Map对象对数据进行格式化，将同一年份的数据归类到children数组中。最后，使用新格式的数据在页面上渲染，只显示非当前年的年份。

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

需求：页面按年份展示数据，而当年的数据不展示年份，其他需要按年份展示每一年的数据，但是后端返回的数据如下：

const data=[{
		createYear:2022,
		name:'hhhh',
		text:'测试测试',
		createTime:'2022-10-21 12:20'
	},{
		createYear:2022,
		name:'hhhh',
		text:'测试测试',
		createTime:'2022-09-21 12:20'
	},{
		createYear:2021,
		name:'hhhh',
		text:'测试测试',
		createTime:'2021-10-21 12:20'
	},{
		createYear:2021,
		name:'hhhh',
		text:'测试测试',
		createTime:'2021-08-21 12:20'
	}
]

那么该如何处理呢？

第一步：获取当前年份

 const [createYear] = useState(new Date().getFullYear())
 console.log(createYear) // 2022 为数组类型
 const year = createYear.toString()  // 将此 改变为字符串类型

第二步：处理后端数据

const formatDataList = (list: { createYear: string }[]) => {
    // 首先进行判断list是否存在
    if (!list || list.length <= 0) {
      return list
    }
    // 创建new map,存键值对
    const map = new Map()
    // 对传入的数组进行遍历，并找到creactYear
    // 判断map中是否存在createYear ，不存在，进行set createYear
    // 以及children 
    list.map((item: { createYear: string }) => {
      const { createYear } = item
      if (!map.has(createYear)) {
        map.set(createYear, { createYear: createYear, children: [] })
      }
      // get map中的createYear，并且在对应的children中push item
      map.get(createYear).children.push(item)
    })
    // 返回新的数组
    return Object.values(Object.fromEntries(map.entries()))
}

Map.entries() 方法用于返回一个迭代器对象，该对象包含Map每个元素的所有[键，值]对。它按插入顺序返回映射的所有元素的[键，值]对。Map.entries() 方法不需要传递任何参数，并返回Map的迭代器对象。
Object.fromEntries() 把键值对列表转换为一个对象，这个方法是和 Object.entries() 相对的。
第三步：使用此方法

{formatDataList(data).map((item: AnyIfEmpty) => (
   <div className="main" key={item.createYear}>
      {item.createYear !== year && (
         <div className="photo-year">{item.createYear}年</div>
      )}
   </div>
   )
)}

那么最后，被处理过的数据长这个样子哒

const data=[{
		createYear:2022,
		children：[{
			name:'hhhh',
			text:'测试测试',
			createTime:'2022-10-21 12:20'
		},{
			name:'hhhh',
			text:'测试测试',
			createTime:'2022-09-21 12:20'
		}]
	},{
		createYear:2021,
		children：[{
			name:'hhhh',
			text:'测试测试',
			createTime:'2021-10-21 12:20'
		},{
			name:'hhhh',
			text:'测试测试',
			createTime:'2021-08-21 12:20'
		}]	
	}
]