React Native SectionList如何为同日期对象仅显示一个分组头部？

问题现状 #

你使用React Native的SectionList实现支出列表按日期分组，但当前代码会给每个同日期的支出项生成独立的分组头部，无法实现同日期项共用一个头部的效果，同时希望尽量保留原始数据结构，方便后续的编辑、删除等数据库操作。

你的原始数据经过处理后，每个section仅包含单个支出项，结构类似：

[{
  "data": [[Object]], 
  "date": "23th July 2023"
}, {
  "data": [[Object]], 
  "date": "24th July 2023"
}, {
  "data": [[Object]], 
  "date": "24th July 2023"
}]

问题原因 #

当前代码使用map遍历原始数据时，给每个支出项单独创建了一个section，每个section的data仅包含当前支出项，导致SectionList将每个项都视为独立分组，自然会重复显示日期头部。

解决方案 #

无需修改原始数据，只需在处理数据时用reduce方法按格式化后的日期分组，将同一天的所有支出项合并到同一个section的data数组中，SectionList就能正确识别同日期分组并只显示一个头部。

修改后的完整代码 #

const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];

const HomeScreen = () => {

  const [expenses, setExpenses] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const rawData = await getExpenses();
  
        // 用reduce按日期分组，合并同日期的支出项
        const groupedData = rawData.reduce((acc, item) => {
          const dateKey = new Date(item.date);
          const formattedDate = `${dateKey.getDate()}th ${month[dateKey.getMonth()]} ${dateKey.getFullYear()}`;
          
          // 检查是否已有该日期的分组
          const existingGroup = acc.find(group => group.date === formattedDate);
          if (existingGroup) {
            // 已有分组则添加当前项到data数组
            existingGroup.data.push(item);
          } else {
            // 没有则创建新分组
            acc.push({
              date: formattedDate,
              data: [item]
            });
          }
          return acc;
        }, []);

        setExpenses(groupedData);
      } catch (error) {
        console.log("Error retrieving expenses:", error);
      }
    };
    fetchData();
  }, []);


  const renderItem = ({ item }) => {
    return (
      <View style={styles.listitem}>
        <Text>{item.name}</Text>
        <Text>{item.amount}</Text>
        <Text>{item.category}</Text>
      </View>
    );
  };

  const renderSectionHeader = ({ section }) => {
    return (
      <View>
        <Text>{ section.date }</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <SectionList 
        sections={expenses}
        keyExtractor={(item, index) => `${item.date}-${index}-${item.amount}`}
        renderItem={renderItem}
        renderSectionHeader={renderSectionHeader}
      />
    </View>
  );
};

关键修改点说明 #

1. 数据分组逻辑：用Array.reduce替代map，遍历原始数据时将同日期的支出项合并到同一个分组的data数组中，确保每个日期仅对应一个section。
2. keyExtractor优化：调整keyExtractor生成更唯一的key（加入item.amount），避免同日期下多个项的key重复，保证列表渲染稳定性。
3. 原始数据保留：所有分组操作基于原始数据的引用，未修改原始数据的结构和内容，完全不影响后续的编辑、删除等数据库操作。

额外注意事项 #

• 确保日期格式化一致性：如果不同item.date解析后生成的formattedDate字符串有差异（比如日期后缀是st/nd/rd而非统一的th），会导致分组失败，建议统一日期格式化规则。
• Expo Go兼容性：该方案与Expo Go无关，SectionList的分组逻辑是React Native标准行为，只要sections数组格式正确就能正常工作。

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