¡necesito tu ayuda! Soy nuevo en reaccionar nativo y tengo este problema: quiero mostrar una lista de marcadores en el mapa donde la información se almacena en una base de datos (SQLite). Estoy usando react-native-maps, por lo que en el componente MapView tengo
return ( <View style={styles.sectionContainer} > <TouchableOpacity onPress={()=>{console.log(arrayData)}} > <Text>elements of arrayData</Text> </TouchableOpacity> <MapView style={styles.map} mapType='hybrid' initialRegion={{ latitude: 41.73909537455833, longitude: 12.701842524111271, latitudeDelta: 0.0922, longitudeDelta: 0.0421,}} > { arrayData.map((item, index) => ( <Marker key={index} title={item.name} coordinate={item.coordinates} /> ))} </MapView> </View> );donde arrayData es una matriz de objetos, cada objeto contiene esta información: nombre y coordenadas. Traté de crear esta matriz de esta manera: defino una matriz inicial, una función lee elementos de la base de datos y los agrega en la matriz y finalmente devuelve el arrayData (= matriz). Este es mi código:
const array = [ {name: 'a', coordinates: {latitude: 41.73909537455833, longitude: 12.701842524111271,}} ]; const location=[ {latitude: 41.73767484979501, longitude: 12.703637927770613}, {latitude: 41.738562243639635, longitude: 12.701931037008762}, {latitude: 41.73870384524446, longitude: 12.700487338006495}, ]; const funzione = ()=>{ // get data from database called Users try { db.transaction((tx) => { tx.executeSql( "SELECT Title FROM Users", [], (tx, results) => { var len = results.rows.length; if (len > 0) { for(let i=0;i<len;i++){ var userTitle = results.rows.item(i).Title; //add the element in the array array.push({name: userTitle, coordinates: location[i]}); } } } ) }); return(array); } catch (error) { console.log(error) } } const arrayData = funzione();Ahora el problema es que en el componente MapView, arrayData es solo la matriz inicial, luego veo solo 1 marcador. Es como si la función no funcionara correctamente, pero si ejecuto console.log(arrayData); el resultado es correcto y arrayData tiene los elementos leídos en la base de datos. ¿Puede ayudarme alguien? ¡Muchas gracias!
Probablemente el problema se deba a que está representando el mapa y la solicitud para obtener sus datos de la base de datos es asíncrona, por lo que en el ciclo de vida del componente, la solicitud no finalizó cuando se representó el mapa. Intente agregar un enlace useEffect para cambiar su información. Agrego algunos cambios que necesitarás hacer:
1 - Cambie su función a asíncrona y oblíguela a esperar la información... algo como esto:
db.transaction((tx) => { **await** tx.executeSql( "SELECT Title FROM Users", [], (tx, results) => { ...2 - Cree su matriz con useState hook en lugar de const. Algo como:
const [array, setArray] = useState([]);3 - Usa el gancho useEffect para actualizar la información de la lista de marcadores. Como esto:
const getData = async () => { const response = await funzione(); setArray(response); } useEffect(() => { getData (); }, [])Cualquier problema solo hazme un ping. Que tengas un buen día.
La primera respuesta es correcta, simplemente aprovechando para decir que también tendrá que cambiar el cuerpo de su devolución de llamada sql para devolver una nueva lista de objetos:
(tx, results) => { return (results?.rows || []).map((row, i) => ({name: row.item.Title, coordinates: location[i]})); }Y luego agréguelos a su estado
setArray([...array, ...response]);