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

Posted 2023-02-16

【中文标题】保存页面时重新呈现 FlatList 项目

【英文标题】：FlatList items rerendering when saving the page

【发布时间】：2021-11-29 13:40:18

【问题描述】：

问题是当我保存页面时，已经渲染的项目再次重新渲染，显示错误“警告：遇到两个具有相同键的孩子，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

【参考方案1】：

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