[英]FlatList items rerendering when saving the page
Issue is when i am saving the page, the already rendered items are rerendering again, showing the error " Warning: Encountered two children with the same key, AhO8HUMnDjAH1Mh8u2jM
. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version."问题是当我保存页面时,已经呈现的项目再次重新呈现,显示错误“警告:遇到两个孩子使用相同的密钥, AhO8HUMnDjAH1Mh8u2jM
。密钥应该是唯一的,以便组件在更新期间保持其身份。非唯一键可能会导致子项被复制和/或省略——这种行为不受支持,可能会在未来的版本中改变。”
Here is my code PLs note I have used pagination, and infinite scroll list methods.这是我的代码请注意我使用了分页和无限滚动列表方法。
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
Pls ignore this issue, in the development phase, this will happen.请忽略这个问题,在开发阶段,这会发生。 To ignore these warnings use -> https://stackoverflow.com/a/67670955/13733008要忽略这些警告,请使用 -> https://stackoverflow.com/a/67670955/13733008
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.