Estoy haciendo mi primera aplicación móvil en React native. Estoy tratando de representar marcadores que han obtenido la longitud y la latitud de una Api. Para probar esto, he usado una Api que tiene una dirección aleatoria en los Países Bajos. He escrito un código para obtener esta Api y mapear a través de las claves para representar los marcadores, solo que no se mostrarán en mi mapa. Este es el código que escribí para obtener la Api y el mapeo de las claves para obtener marcadores:

 import React, {useState, useEffect} from 'react'; import { Marker }from 'react-native-maps' import { View } from 'react-native'; function SupermarketList() { const [data, setData] = useState([]); useEffect( () => { fetch('http://api.postcodedata.nl/v1/postcode/?postcode=1211EP&streetnumber=60&ref=domeinnaam.nl&type=json', { headers: { 'Cache-Control': 'no-cache', }, }) .then(response => response.json()) .then(results => { setData(results.details); console.log(results); }) .catch(error => console.error(error)); }, []); const markers = data.map((supermarket, index) => { const lon = supermarket.lon const lat = supermarket.lat console.log(markers) return ( <Marker key={index} coordinate={{ lat, lon}}/> ) }) return ( <View> {markers} </View> ) } export default SupermarketList

Como dije, los marcadores no aparecerán en el mapa. He puesto algunos console.logs para ver dónde está el problema porque no recibo errores. console.log (resultados) funciona y me devuelve datos de API, lo mismo para console.log (supermercado). Lo que no funciona es console.log (marcadores). Esto me devuelve "indefinido". ¡No tengo ni idea de porqué!