我正在制作一个flatlist,在其中我显示用户滚动的信息。
但是我不知道为什么会出现以下错误:
ERROR Warning: Encountered two children with the same key,
我真的不知道为什么会出现"键重复"的问题。这是我的代码:
我已经搜索了很多小时,但是我没有找到解决方案,所以如果有人能够解释一下给我,非常感谢您提前。
ERROR Warning: Encountered two children with the same key,
4
. 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.我真的不知道为什么会出现"键重复"的问题。这是我的代码:
const getProducts = (itemId, check, multiSliderValue, offset) => {
return new Promise((resolve, reject) => {
dispatch(
authAction.GetAllProducts(
itemId,
check,
brand,
multiSliderValue,
offset
)
).then((response) => {
// faites une copie de la liste de données avant de l'utiliser comme source pour l'opérateur de décomposition
const updatedList = [...informations];
let counter = informations.length;
const newArray = response.array.map((item) => ({
...item,
key: counter++, // utilisez un compteur incrémental comme clé unique
}));
if (newArray.length > 0) {
setInformations([...updatedList, ...newArray]);
setOffset(offset + 5);
}
setIsLoading(false);
resolve(newArray);
});
});
};
const loadMoreData = () => {
if (isLoading) {
return; // empêche les appels multiples à la fonction de chargement de données
}
console.log(itemId, check, multiSliderValue, offset + 5);
setIsLoading(true);
getProducts(itemId, check, multiSliderValue, offset)
.then((response) => {
if (response) {
// mettez à jour votre liste de données avec les nouvelles données
setInformations([...informations, ...response]);
// mettez à jour l'offset
setOffset(offset + 5);
} else {
console.log("NO RESPONSE");
}
})
.catch((error) => {
console.log("error: ", error);
})
.finally(() => {
setIsLoading(false);
});
};
这是我的FlatList:
<FlatList
onEndReachedThreshold={0.5}
onEndReached={loadMoreData}
ListFooterComponent={isLoading ? <ActivityIndicator /> : null}
style={{top: "2%"}}
data={informations}
renderItem={({item}) => (
<View style={styles.Products}>
<TouchableOpacity
onPress={() =>
navigation.navigate("descriptionProduct", {
data: item,
})
}
>
<View style={{width: "40%", height: "60%"}}>
<Image
style={styles.imageProduct}
source={{uri: item.image_url}}
/>
</View>
<View style={styles.productInfos}>
<View style={{width: "60%", height: "30%"}}>
<Text
style={{
fontSize: 15,
bottom: "340%",
}}
>
{item.titre}
</Text>
</View>
<View
style={{
display: "flex",
flexDirection: "row",
bottom: "1%",
}}
>
<Text style={{color: "grey"}}>à partir de </Text>
<Text style={styles.price}>{item.prix} €</Text>
<Text style={{left: "50%", color: "grey"}}>
{item.boutiqueCpt} offres
</Text>
</View>
</View>
</TouchableOpacity>
</View>
)}
/>
)}
而在页面的开头,我正在使用这个钩子:
useEffect(() => {
if (isLoading) {
return; // empêche les appels multiples à la fonction de chargement de données
}
getBrands(itemId);
getProducts(itemId, check, multiSliderValue, offset);
setIsLoading(true);
}, [dispatch]);
我已经搜索了很多小时,但是我没有找到解决方案,所以如果有人能够解释一下给我,非常感谢您提前。