保存頁面時 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