React Native FlatList多组件渲染时key属性警告问题排查

我一眼就看出问题出在哪了——你在ItemView内部的split.map循环里返回的是不带唯一key的Fragment（就是那个<>语法），这才是触发警告的根源，和FlatList本身的keyExtractor无关！

问题原因 #

React要求所有列表中的子元素（包括嵌套的内部列表）都必须拥有唯一的key属性。虽然你给FlatList的每个列表项配置了keyExtractor，但在ItemView里用map生成的每一组<Text>+高亮文本，是被无key的Fragment包裹的，React无法识别这些内部子元素的唯一性，所以抛出了警告。

之前你尝试给单个Text加key没用，因为React是把整个Fragment当作一个列表项来处理的，必须给这个外层的Fragment加key才行。

修复方案 #

把短语法的<>换成完整的<React.Fragment>，并给它添加唯一的key（可以结合index和elem来保证唯一性）。另外，条件渲染的高亮Text如果是列表的一部分，也建议给它加个独立的key：

import React from 'react';
// ... 其他导入

const ItemView = (row: any) => {
  let title = row.item.title
  let split = title.split(search)
  let searchStringCount = split.length
  return (
    <Text>
      { split.map((elem: string, index: number) => {
          return (
            <React.Fragment key={`item-${index}-${elem}`}>
              <Text style={styles.textListStyle}>
                {elem}
              </Text>
              {index + 1 < searchStringCount && (
                <Text 
                  style={styles.textHighLightStyle}
                  key={`highlight-${index}`}
                >
                  {search}
                </Text>
              )}
            </React.Fragment>
          )
        }) }
    </Text>)
}

为什么这样有效？ #

• 给每个Fragment设置唯一key后，React就能追踪这些内部子元素的变化，避免重复渲染和警告。
• 用${index}-${elem}组合key比单纯用index更稳妥，尤其是当列表项可能被重新排序时，index会变化，但结合元素内容的key能保持唯一性。

额外提示 #

如果不想用Fragment，也可以用一个View（设置flexDirection: 'row'来保证文本横向排列）作为容器，给View加key，效果是一样的：

{ split.map((elem: string, index: number) => {
    return (
      <View key={`item-${index}-${elem}`} style={{flexDirection: 'row'}}>
        <Text style={styles.textListStyle}>{elem}</Text>
        {index + 1 < searchStringCount && (
          <Text style={styles.textHighLightStyle} key={`highlight-${index}`}>
            {search}
          </Text>
        )}
      </View>
    )
  }) }

这样修改后，那个烦人的key警告应该就消失了！

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