0

问题是当我保存页面时，已经渲染的项目再次重新渲染，显示错误“警告：遇到两个具有相同键的孩子，AhO8HUMnDjAH1Mh8u2jM.键应该是唯一的，以便组件在更新时保持其身份。非唯一键可能导致孩子被重复和/或省略——这种行为不受支持，可能会在未来的版本中改变。”

这是我的代码 PLs note 我使用了分页和无限滚动列表方法。

 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
4

1 回答 1

0

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

于 2021-10-10T19:47:35.200 回答