警告：列表中的每个孩子都应该有一个唯一的“关键”道具。反应原生

Question

您好，我正在尝试使用 react native 构建一个迷你社交媒体应用，收到以下错误：

警告：列表中的每个孩子都应该有一个唯一的“key”属性。

查看VirtualizedList的渲染方法

也尝试使用 results.map 而不是平面列表。 并且还使用stackoverflow上的解决方案更改密钥提取器，但没有成功。 有人可以帮忙吗？

代码：

    return (
    <FlatList
      style={{flex:1}}
      data={results}
      keyExtractor={(item, index) => {
        return item.id;
      }} 
      renderItem={({item}) => <TouristCard key={item.id} item={item} onPress={()=> navigation.navigate('HomeProfile', {userId: item.userId})} /> }
    />
);

旅游卡：

const TouristCard = ({item,onPress}) => {

return (   
    <View key={item.id} style={styles.listItem} >
      <UserImg  source={{uri: item.userImg ? item.userImg : 'https://lh5.googleusercontent.com/-b0PKyNuQv5s/AAAAAAAAAAI/AAAAAAAAAAA/AMZuuclxAM4M1SCBGAO7Rp-QP6zgBEUkOQ/s96-c/photo.jpg'}}/>
      <View style={{alignItems:"center",flex:1}}>
        <Text style={{fontWeight:"bold"}}>{item.fname ? item.fname : 'Annonymous' } {item.lname ? item.lname : '' }</Text>
        <Text>{item.flightDesc}</Text>
        <Text style={{fontWeight:"bold"}}>{item.age}</Text>
      </View>
      <Text style={{color:"blue"}}>View Profile</Text>
    </View>
);

结果对象：

   const filterByDates = (results,startDate,endDate) => {
    return results.filter(res => {
        return startDate<res.endDate && res.startDate<endDate;
    });
};

useEffect(() => {
    const fetchCommunity = async() => {
        try {
            //const list = [];
            await firestore()
            .collection('flights')
            .where("destination","==",destination)
            .where("user","!=",user.uid)
            .get()
            .then((querySnapShot) => {
                querySnapShot.forEach(doc => {
                    const {user,flightDesc,startDate,endDate} = doc.data();
                    list.push({
                        user: user,
                        flightDesc,
                        startDate,
                        endDate
                    });
                })
                
            })  
            setResults(filterByDates(list,startDate,endDate));
            fetchProfiles();
        } catch(e) {
            console.log(e);
        }
    }
    const fetchProfiles = async() => {
        try {
            //const list2=[];
            list.forEach(async obj => {
                await firestore()
                .collection('users')
                .where("userId","==",obj.user)
                .get()
                .then((querySnapShot) => {
                querySnapShot.forEach(doc => {
                    const {userImg,age,fname,lname} = doc.data();
                    list.push({
                        id: doc.id,
                        userImg,
                        age,
                        fname,
                        lname
                    });
                })
                
            })  
            setResults(list);
            console.log(list);
            })
        } catch (e) {
            console.log(e);
        }
    }
    fetchCommunity();
},[]);

Answer 1

用这个替换你的Flatlist。

<FlatList
   style={{flex:1}}
   data={results}
   keyExtractor={(item) => item.id.toString()} // Here was the error
   renderItem={({item}) => <TouristCard item={item} onPress={()=> navigation.navigate('HomeProfile', {userId: item.userId})} /> }
/>

还要检查results 的每个元素是否有唯一的id？

还有MAIN 点...检查您的数组项是否有一个名为id 的属性。如果userId 是唯一的，则如上所示使用它