Two children with the same key mongodb _id - mongodb

Question

i got this error : Encountered two children with the same key, 610bebf8b6f3820b38b0c613. 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
but i use mongodb id so no way 2 id be them same
it happen when i load more items...
im using redux toolkit express mongoose
it happen sometimes not always
flatList :
<View style={{flex: 1, margin: 10, flexDirection: 'column'}}>
<Search />
{users.pending && !users.users.length ? (
<ActivityIndicator size="large" color="#0000ff" />
) : users.users.length === 0 ? (
<Text>No users</Text>
) : (
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
data={users.users}
renderItem={({item}) => <Card user={item} />}
keyExtractor={item => item._id}
onEndReachedThreshold={0}
onEndReached={handleLoadMore}
/>
)}
</View>
usersSlice :
getUsersSuccess: (state, action) => {
state.pending = false;
if (state.users.length === 0) {
state.users = action.payload;
} else {
state.users = [...state.users, ...action.payload];
}
state.skip = state.users.length;
},
apiCall
export const getUsers = async (dispatch, skip) => {
dispatch(getUsersStart());
try {
const res = await axios.get(`http://10.0.2.2:5000/users?skip=${skip}`);
dispatch(getUsersSuccess(res.data));
} catch (error) {
dispatch(getUsersError());
console.error('error => ', error.message);
}
};
server :
export const getUsers = async (req, res) => {
const skip =
req.query.skip && /^\d+$/.test(req.query.skip) ? Number(req.query.skip) : 0;
console.log(' req.qury.skip >>>>', req.query.skip);
try {
const users = await User.find({}, undefined, { skip, limit: 7 });
users.map((user) => {
user.name = decryptString(user.name, process.env.CRYPTO_PASSWORD);
});
res.status(200).json(users);
} catch (error) {
console.error(error.message);
res.status(500).json('Server Error');
}
};
i get
virtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.
i think about delete duplicate item but i think not good choice

Answer 1

but i use mongodb id so no way 2 id be them same it happen when i load more items
your assumption can be wrong in multiple ways. Mongo IDs are unique in the database, but you could be getting duplicate values because of a variety of reasons.
I suspect that the API is giving you overlapping data and you merge new data with the old data without checking -
state.users = [...state.users, ...action.payload];
modify this to have a basic uniqueness check - and only add elements that are not already in the old list