保存页面时重新呈现的FlatList项

Question

问题是当我保存页面时，已经渲染的项目再次重新渲染，显示错误"警告:遇到两个具有相同键AhO8HUMnDjAH1Mh8u2jM的子节点。键应该是唯一的，以便组件在更新期间保持其标识。非唯一键可能导致子键被重复和/或省略——不支持这种行为，并且可能在将来的版本中更改。">

这是我的代码请注意，我已经使用了分页和无限滚动列表方法。

import React,{useState,useEffect} from 'react';
import { View, Text, StyleSheet, FlatList, ActivityIndicator, TouchableOpacity, Button } from 'react-native';
import firestore from '@react-native-firebase/firestore';
import { Icon } from "react-native-vector-icons/Ionicons";
const HomeScreen = ({navigation}) => {

const [sessions,setSessions] = useState(new Array());
const [sessionsPerLoad] = useState(12)
const [startAfter,setStartAfter] = useState(Object)
const [lastPost,setLastPost] = useState(false)

//read docs
const getSessions = async (sessionsPerLoad) => {
const sessionArray = [];
const querySnap = await firestore()
.collection('sessions')
.orderBy('createdAt', 'desc')
.limit(sessionsPerLoad)
.get()
const lastVisible = querySnap.docs[querySnap.docs.length - 1]
querySnap.forEach((doc)=> {
let sessionData = doc.data()
sessionData.sessionID = doc.id
sessionArray.push(sessionData)
})
return {sessionArray, lastVisible}
}
const getMoreSessions = async (startAfter,sessionsPerLoad) => {
const sessionArray = [];
const querySnap = await firestore()
.collection('sessions')
.orderBy('createdAt', 'desc')
.startAfter(startAfter)
.limit(sessionsPerLoad)
.get()
const lastVisible = querySnap.docs[querySnap.docs.length - 1]
querySnap.forEach((doc)=> {
let sessionData = doc.data()
sessionData.sessionID = doc.id
sessionArray.push(sessionData)
})
return {sessionArray, lastVisible}
}
useEffect(()=>{
getSession()
},[])
const getSession = async () => {
const sessionsData = await getSessions(sessionsPerLoad)
setSessions([...sessions, ...sessionsData.sessionArray])
// console.log('Sessions',sessions)
setStartAfter(sessionsData.lastVisible)
// console.log('Last VIsible',sessionsData.lastVisible)
}
const getMoreSession = async () => {
if(!lastPost){
const sessionsData = await getMoreSessions(startAfter,sessionsPerLoad)
setSessions([...sessions, ...sessionsData.sessionArray])
// console.log('More Session',sessions)
setStartAfter(sessionsData.lastVisible)
sessionsData.sessionArray.length==0 ? setLastPost(true):setLastPost(false)
}
}
const RenderCard = ({item})=>{
return(
<TouchableOpacity onPress={()=>{navigation.navigate('HomeScreen2', {item})}}>
<View style={{padding: 10}}>
<Text>Title= {item.title}</Text>
<Text>Description= {item.description}</Text>
</View>
</TouchableOpacity>
)
}

return(
<View>
<FlatList
data={sessions}
renderItem={({item})=><RenderCard item={item} />}
keyExtractor={(item)=>item.sessionID}
onEndReached={getMoreSession}
onEndReachedThreshold={0.01}
scrollEventThrottle={150}
ListFooterComponent={()=>
!lastPost && <ActivityIndicator />}
/>
</View>
);
};
const styles = StyleSheet.create({
});
export default HomeScreen

Answer 1

请忽略这个问题,在开发阶段,这将会发生。要忽略这些警告，请使用->https://stackoverflow.com/a/67670955/13733008