React-Native映射未知日期键嵌套消息实现按日期分组渲染

核心处理思路：接口返回的messages数组中每一项都是单键值对象，键为动态日期字符串，无需提前预知键名，通过JS原生的Object.entries()即可提取内层日期与对应消息数据，再经过日期范围过滤、结构规整后直接渲染即可。

数据预处理逻辑 #

先对齐接口返回的YYYY-MM-DD日期格式，生成近7天的日期范围，再把原始消息规整为按日期分组的结构化数组，过滤超出时间范围的消息、无消息的空日期块，方便直接遍历渲染：

// 生成近7天YYYY-MM-DD格式日期数组，与接口返回格式对齐
const getLast7Days = () => {
  const days = [];
  for (let i = 0; i < 7; i++) {
    const date = new Date();
    date.setDate(date.getDate() - i);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    days.push(`${year}-${month}-${day}`);
  }
  return days;
};

// 规整原始消息数据为渲染可用结构
const formatMessageData = (rawMessages) => {
  const validDateRange = getLast7Days();
  const dateMessageMap = {};
  // 初始化近7天日期对应空消息数组
  validDateRange.forEach(date => {
    dateMessageMap[date] = [];
  });
  // 遍历原始消息，提取动态日期键
  rawMessages.forEach(dateItem => {
    // 直接取对象的第一个键值对，即「日期: 消息列表」，无需提前预知键名
    const [dateKey, messageList] = Object.entries(dateItem)[0];
    // 仅保留近7天范围内的消息
    if (validDateRange.includes(dateKey)) {
      dateMessageMap[dateKey] = messageList;
    }
  });
  // 转为按日期倒序（最新在前）的数组，过滤无消息的空日期
  return validDateRange
    .map(date => ({ date, messageList: dateMessageMap[date] }))
    .filter(item => item.messageList.length > 0);
};

页面渲染实现 #

使用React Native基础组件即可实现日期分块、消息展示、块间分隔线效果，无需引入第三方依赖：

import { View, Text, ScrollView, StyleSheet } from 'react-native';

const DateGroupedMessageList = ({ apiResponse }) => {
  // 传入接口返回的messages数组，得到规整后的分组数据
  const groupedData = formatMessageData(apiResponse.messages);

  return (
    <ScrollView style={styles.pageContainer}>
      {groupedData.map((dateGroup, groupIndex) => (
        <View key={dateGroup.date}>
          {/* 日期标题 */}
          <View style={styles.dateHeader}>
            <Text style={styles.dateText}>{dateGroup.date}</Text>
          </View>
          {/* 当前日期下的所有消息 */}
          {dateGroup.messageList.map((message, msgIndex) => (
            <View key={msgIndex} style={styles.messageCard}>
              <Text style={styles.messageTitle}>{message.title}</Text>
              <Text style={styles.messageBody}>{message.body}</Text>
            </View>
          ))}
          {/* 非最后一个日期块渲染分隔线 */}
          {groupIndex !== groupedData.length - 1 && (
            <View style={styles.blockDivider} />
          )}
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
    paddingHorizontal: 16,
    backgroundColor: '#ffffff'
  },
  dateHeader: {
    paddingVertical: 12
  },
  dateText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333333'
  },
  messageCard: {
    paddingVertical: 10,
    paddingLeft: 8
  },
  messageTitle: {
    fontSize: 15,
    fontWeight: '500',
    color: '#222222',
    marginBottom: 4
  },
  messageBody: {
    fontSize: 14,
    color: '#666666',
    lineHeight: 20
  },
  blockDivider: {
    height: 1,
    backgroundColor: '#eeeeee',
    marginVertical: 8
  }
});

export default DateGroupedMessageList;

适配说明 #

• 动态日期键提取逻辑不依赖固定键名，后续接口返回任意日期数据都可正常解析，无需修改代码
• 自动过滤近7天范围外的历史消息，无消息的日期不会生成空白展示块
• 分隔线自动适配日期块数量，不会在列表末尾渲染多余分隔线
• 消息量增长后，可直接替换ScrollView为FlatList优化长列表性能，分组逻辑无需调整

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