Estoy creando mi primera aplicación móvil en React, donde tengo un mapa con marcadores renderizados. Ahora quiero que los datos del marcador provengan de los datos que obtuve de una Api. Quiero escribir el mío, pero para hacer una prueba rápida encontré uno que tiene muchas direcciones en los Países Bajos. Tengo dos archivos: mapView y mapMarker. En mi archivo mapMarker, tengo el siguiente código para obtener los datos de la API y mapearlos en una clave de marcador:
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); console.log(results); }) .catch(error => console.error(error)); }, []); const markers = data.map((supermarket, index) => { const lon = supermarket.lon const lat = supermarket.lat return ( <Marker key={index} coordinate={{ lat, lon}}/> ) }) return ( <View> {markers} </View> ) } export default SupermarketListEn mi mapView.js, uso la función de marcador de esta manera:
<MapView style={styles.map} initialRegion={{ latitude: 51.926517, longitude: 4.462456, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }} > <Marker coordinate={pin} draggable={true} onDragStart={(e) =>{ console.log("Drag start", e.nativeEvent.coordinates) }} onDragEnd={(e) =>{ setPin({ latitude: e.nativeEvent.coordinate.latitude, longitude: e.nativeEvent.coordinate.longitude }) }} > <Callout> <Text>I'm here</Text> </Callout> </Marker> <SupermarketList> </SupermarketList> <Circle center = {pin} radius = {1000}></Circle> </MapView>Ahora mi problema: cuando trato de probar este código en mi teléfono, aparece el siguiente error: Error de procesamiento: undefined no es una función (near'..data.map...') y apunta a const.markers = data.map((...etc) Intenté buscar en Google este error, pero las personas con el mismo error parecen tener un código completamente diferente. No tengo idea de qué estoy haciendo mal o cómo debo solucionarlo. ¡Ayuda, por favor!
Su respuesta devuelve un objeto en lugar de una matriz. La matriz que desea se coloca dentro de los resultados . detalles. Entonces, en su código, después de que se obtienen los datos, se convierte en un objeto y la función de mapa no funcionará en ese tipo de variable.
Solo cambia:
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); original one setData(results.details); //changed one console.log(results); }) .catch(error => console.error(error));Deberia de funcionar.