React项目中如何按日期分组展示数据？技术实现咨询

你当前的问题是相同日期的标题会重复渲染，要实现同一日期下的内容合并展示，核心是先对数据按日期分组，再分层渲染。

解决步骤 #

1. 数据分组：使用lodash的groupBy方法，将排序后的列表按格式化后的日期字符串分组，把同一日期的所有数据归为一组。
2. 分层渲染：先遍历分组后的日期键，渲染日期标题；再遍历该日期对应的所有数据项，渲染内容。

修改后的完整代码 #

import "./index.scss"
import { useEffect, useState } from 'react'
import { useQuery } from 'react-query'
import { getLists } from 'api'
import { RootStateOrAny, useSelector, useDispatch } from 'react-redux'
import moment from 'moment'
import _ from 'lodash'

function List() {
  const dispatch = useDispatch()
  const [groupedResult, setGroupedResult] = useState<Record<string, any[]>>({})
  const { address } = useSelector((state: RootStateOrAny) => state.user)
  const { list, filteredList } = useSelector((state: RootStateOrAny) => state.calendar)

  const { isLoading } = useQuery(['get-list'], () => getLists(), {
    enabled: !!address,  
    onSuccess: (data) => {    
      dispatch({ type: "CHANGE_LIST_CALENDAR", payload: data })
    }    
  })

  // 处理数据：排序后按日期分组
  useEffect(() =>{
    const sortedData = _.sortBy(filteredList, ['Date'])
    const grouped = _.groupBy(sortedData, item => moment(item.Date).format('MMMM Do, YYYY'))
    setGroupedResult(grouped)
  }, [filteredList])

  useEffect(() => {
    const sortedData = _.sortBy(list, ['Date'])
    const grouped = _.groupBy(sortedData, item => moment(item.Date).format('MMMM Do, YYYY'))
    setGroupedResult(grouped)
  }, [list])

  return (
    <div className="calendar__list">
      <div className="calendar__list__container">
        {!isLoading && Object.entries(groupedResult).map(([date, items]) => (
          <div key={date}>
            <div className="calendar__list__date">
              <p>{date}</p>
            </div>
            {items.map((item: any) => (
              <div key={item.id} className="calendar__list__content">  
                <div className="calendar__list__info">
                  <img src={item.imageUrl} alt={item.name} />  
                  <div>
                    <h3>{item.name}</h3>
                    <p>{moment(item.Date).format('MMMM Do YYYY - h:mm a')}</p>
                  </div>
                </div>
                <div className="calendar__list__price">
                  <div>           
                    <span>{item.price}</span>
                  </div>
                  <p>PRICE</p>
                </div>
                <div className="calendar__list__social">                
                  {item.externalUrl && <a href={item.externalUrl} target='_blank' 
                  rel="noreferrer"><button><Globe />Website</button></a>}               
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  )
}

export default List

关键修改说明 #

• 把原来的result状态改为groupedResult，存储按日期分组后的对象（键是日期字符串，值是对应的数据数组）
• 修正了原代码中filteredLists的拼写错误（应为filteredList）
• 排序时统一使用Date字段，确保数据按时间顺序排列
• 渲染时先遍历日期分组，每个日期只渲染一次标题，再循环渲染该日期下的所有内容项
• 给每个循环项添加了唯一key（建议用数据本身的id，如果没有可以用索引，但id更稳定）

内容的提问来源于stack exchange，提问作者Mermaid