React Native FlatList字母索引如何去除重复显示的首字母

• 去重逻辑作用域错误：你写的new Set逻辑是每个列表项单独执行的，只能拿到当前项的首字母，根本感知不到其他列表项已经展示过的首字母，无法实现跨条目去重。
• 传参错误：给ListItem传递的slicedInitial是函数类型，组件内直接渲染时不会执行函数，本身渲染逻辑存在问题。
• 前置步骤缺失：做字母索引前没有先把列表按首字母排序，同首字母条目不聚合的话，就算去重也会出现索引重复弹出的问题。

核心判断逻辑：列表按首字母排序后，只有当前条目是同首字母分组的第一个条目时，才展示首字母标识，其余同首字母条目标识直接隐藏。

修正后的代码 #

1. 列表页渲染逻辑 #

const renderList = () => {
  // 先按商家名称首字母排序，保证同首字母条目聚合
  const sortedList = [...data.list].sort((a, b) => {
    const initialA = a.title.slice(0, 1).toUpperCase()
    const initialB = b.title.slice(0, 1).toUpperCase()
    return initialA.localeCompare(initialB)
  })

  return (
    <View>
      <Animated.FlatList
        data={sortedList}
        key={"list"}
        keyExtractor={(item, index) => `list ${index}`}
        renderItem={({ item, index }) => {
          const currentInitial = item.title.slice(0, 1).toUpperCase()
          // 第一条没有上一项，默认空值
          const prevInitial = index === 0 
            ? '' 
            : sortedList[index - 1].title.slice(0, 1).toUpperCase()
          // 和上一项首字母不一致时才展示索引
          const showInitial = currentInitial !== prevInitial

          return (
            <ListItem
              list
              title={item.title}
              slicedInitial={showInitial ? currentInitial : ''}
              onPress={() => onProdDetail(item)}
            />
          )
        }}
      />
    </View>
  );
};

2. ListItem组件 #

原有组件逻辑无需大改，直接渲染传入的字符串值即可：

export default function CatListItem(props) {
  const {image, title, slicedInitial, onPress} = props;
  return (
    <View>
      {/* 空字符串时不会占用布局高度，自动隐藏索引位 */}
      <Text>{slicedInitial}</Text>
      <Text>{title}</Text>
    </View>
  );
};

• 排序步骤统一把首字母转为大写后比对，避免首字母大小写不一致（比如t和T）导致的分组错误。
• 相邻项首字母比对的方案不需要额外维护全局已展示首字母的状态，性能比遍历全量列表做Set去重更好，不会出现状态不同步的问题。
• 渲染后效果完全符合预期：

T
  Toy Store 1
  Toy Store 2
  Toy Store 3

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