Mi FlatList horizontal funciona bien con datos ficticios, pero cuando trato de pasar datos desde el backend a mi FlatList , devuelve el error scrollToIndex out of range: requested index -1 but minimum is 0 .
Los datos se pasan correctamente en FlatList vertical pero cuando intento con el horizontal, da este error.
¿Qué crees que está mal con mi código FlatList horizontal?
useEffect(() => { const getIndex = (placeholder = 0) => { const index = places.findIndex(place => place.id === selectedPlaceId); if (index === -1) return placeholder; return index; }; const index = getIndex(); flatlist.current.scrollToIndex({index}); const selectedPlace = places[index]; const region = { latitude: selectedPlace.coordinate.latitude, longitude: selectedPlace.coordinate.longitude, latitudeDelta: 0.8, longitudeDelta: 0.8 } map.current.animateToRegion(region); }, [selectedPlaceId]) return ( <FlatList ref={flatlist} data={trips} renderItem={({ item }) => <PostCarouselItem post={item} />} horizontal showsHorizontalScrollIndicator={false} snapToInterval={width - 70} snapToAlignment={"center"} decelerationRate={"fast"} viewabilityConfig={viewConfig.current} onViewableItemsChanged={onViewChanged.current} style={{ bottom: 10, left: 0, right: 0, position: "absolute", }} contentContainerStyle={{ marginHorizontal: cardWidth }} ListFooterComponent={<View style={{marginRight: (cardWidth * 2)}}/>} /> );Array.findIndex devuelve -1 si no encuentra un elemento que coincida con la condición.
Debe verificar su condición y agregar validación para el valor del índice.
Como ejemplo:
useEffect(() => { const getIndex = (placeholder = 0) => { const index = places.findIndex(place => place.id === selectedPlaceId); if (index === -1) return placeholder; return index; }; const index = getIndex(); if (index < trips.length) { flatlist.current.scrollToIndex({index}); } const selectedPlace = places[index]; const region = { latitude: selectedPlace.coordinate.latitude, longitude: selectedPlace.coordinate.longitude, latitudeDelta: 0.8, longitudeDelta: 0.8 } map.current.animateToRegion(region); }, [places, selectedPlaceId, trips])