React Native FlatList 键与多重渲染

Question

我正在尝试通过 FlatList 呈现多个组件，但出现此错误：“警告：列表中的每个子项都应该有一个唯一的“关键”道具。”

我确保 keyExtractor 属性设置正确，但我相信我的问题发生在尝试使用地图在我的 FlatList 中渲染多个组件时。

我的 FlatList 和自定义组件如下所示：

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 (
                            <>
                                <Text style={styles.textListStyle}>
                                    {elem}
                                </Text>
                                {index + 1 < searchStringCount &&
                                    <Text style={styles.textHighLightStyle}>
                                        {search}
                                    </Text>}
                            </>
                        )
                    })
                }
            </Text>)
    }


     <FlatList
                style={styles.itemStyle}
                data={filteredData}
                keyExtractor={(item, index) => {
                    return index.toString();
                }}
                ItemSeparatorComponent={ItemSeparatorView}
                renderItem={ItemView} />

我尝试手动向生成的文本组件插入键属性，但没有成功。

Answer 1

使用地图渲染时需要添加key属性

          split.map((elem: string, index: number) => {
                    return (
                        <View key={index}>
                            <Text style={styles.textListStyle}>
                                {elem}
                            </Text>
                            {index + 1 < searchStringCount &&
                                <Text style={styles.textHighLightStyle}>
                                    {search}
                                </Text>}
                        </View>
                    )
                })

React Native FlatList 键与多重渲染

React Native FlatList key with multiple rendering

react-native

react-native-flatlist