Saya sedang membangun aplikasi pertama saya, aplikasi panduan kota.

Saya masih sangat baru dalam React Native dan saya mengalami masalah dengan react-native-maps (saya pikir).

Saya mencoba untuk mendapatkan penanda yang muncul di peta yang berasal dari database saya melalui kueri Axios

Ini Axios saya:

import axios from 'axios';

// URL API BASE
const APIURL = 'http://10.22.101.55:5000/api';


// RECUPERATION DES RESTAURANTS
export const getAllRestaurant = (nom, adresse, ville, cp, telephone, email, latitude, longitude ) => axios.get(`${APIURL}/restaurant`, {
    nom: nom,
    adresse: adresse,
    ville: ville,
    cp: cp,
    telephone: telephone,
    email: email,
    latitude: latitude,
    longitude: longitude
});

Saya harus mengubah URL panggilan saya jika tidak, saya menerima kesalahan jenis Kesalahan Jaringan (Localhost -> 10.22.101.55)

Halaman saya tempat saya memanggil Axios :

import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

// Récupération des données
import {getAllRestaurant} from '../service/emplacements'

export default function AccueilScreen() {

  // RECUPERATION DES RESTAURANTS
  const [restaurants, setRestaurants] = React.useState([])
  const LesRestaurants = () => [
    getAllRestaurant().then(response => {
      setRestaurants(response.data);
      console.log(response);
    }).catch(err => console.log('API :' + err))
  ]

  // CHARGEMENT DES RESTAURANTS
  useEffect(() => {
    LesRestaurants()
  },[])


  return (
    <View style={styles.container}>
     <MapView
      scrollEnabled={false}
      rotateEnabled={false}
      zoomEnabled={false}
      minZoomLevel={0}
      maxZoomLevel={13}
      style={styles.map}
      region={{
         latitude: 49.4826616,
         longitude: 1.7245633,
         latitudeDelta: 0.015,
         longitudeDelta: 0.0121,
      }}
     >
      {restaurants.map((restaurant) => (
        <Marker
          key={restaurant.id}
          coordinate={restaurant.latitude, restaurant.longitude}
          title={restaurant.nom}
        />
      ))}
    </MapView>
   </View>
  );
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: '100%',
    width: '100%',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
 });

Dan ini yang saya dapatkan di konsol:

Object {
  "config": Object {
    "adapter": [Function xhrAdapter],
    "data": undefined,
    "headers": Object {
      "Accept": "application/json, text/plain, */*",
    },
    "maxBodyLength": -1,
    "maxContentLength": -1,
    "method": "get",
    "timeout": 0,
    "transformRequest": Array [
      [Function transformRequest],
    ],
    "transformResponse": Array [
      [Function transformResponse],
    ],
    "url": "http://10.22.101.55:5000/api/restaurant",
    "validateStatus": [Function validateStatus],
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
  },
  "data": Array [
    Object {
      "adresse": "17 Rue de la France",
      "cp": 76220,
      "createdAt": "2021-05-10T07:41:25.000Z",
      "email": "lerestaurant@gmail.com",
      "id": 1,
      "latitude": 49.4813,
      "longitude": 1.73745,
      "nom": "Le Restaurant",
      "telephone": "0685459547",
      "updatedAt": "2021-05-10T07:41:25.000Z",
      "ville": "Gournay",
    },
  ],
  "headers": Object {
    "cache-control": "public, max-age=0",
    "connection": "keep-alive",
    "content-length": "268",
    "content-type": "application/json; charset=utf-8",        
    "date": "Mon, 10 May 2021 08:14:35 GMT",
    "etag": "W/\"10c-flj/WYuf2hJDQ4N+xG++sHgKueQ\"",
    "keep-alive": "timeout=5",
    "x-powered-by": "Express",
  },
  "request": XMLHttpRequest {
    "DONE": 4,
    "HEADERS_RECEIVED": 2,
    "LOADING": 3,
    "OPENED": 1,
    "UNSENT": 0,
    "_aborted": false,
    "_cachedResponse": undefined,
    "_hasError": false,
    "_headers": Object {
      "accept": "application/json, text/plain, */*",
    },
    "_incrementalEvents": false,
    "_lowerCaseResponseHeaders": Object {
      "cache-control": "public, max-age=0",
      "connection": "keep-alive",
      "content-length": "268",
      "content-type": "application/json; charset=utf-8",
      "date": "Mon, 10 May 2021 08:14:35 GMT",
      "etag": "W/\"10c-flj/WYuf2hJDQ4N+xG++sHgKueQ\"",        
      "keep-alive": "timeout=5",
      "x-powered-by": "Express",
    },
    "_method": "GET",
    "_perfKey": "network_XMLHttpRequest_http://10.22.101.55:5000/api/restaurant",
    "_requestId": null,
    "_response": "[{\"id\":1,\"nom\":\"Le Restaurant\",\"adresse\":\"17 Rue de la France\",\"ville\":\"Gournay\",\"cp\":76220,\"telephone\":\"0685459547\",\"email\":\"lerestaurant@gmail.com\",\"latitude\":49.4813,\"longitude\":1.73745,\"createdAt\":\"2021-05-10T07:41:25.000Z\",\"updatedAt\":\"2021-05-10T07:41:25.000Z\"}]",
    "_responseType": "",
    "_sent": true,
    "_subscriptions": Array [],
    "_timedOut": false,
    "_trackingName": "unknown",
    "_url": "http://10.22.101.55:5000/api/restaurant",        
    "readyState": 4,
    "responseHeaders": Object {
      "Cache-Control": "public, max-age=0",
      "Connection": "keep-alive",
      "Content-Length": "268",
      "Content-Type": "application/json; charset=utf-8",      
      "Date": "Mon, 10 May 2021 08:14:35 GMT",
      "ETag": "W/\"10c-flj/WYuf2hJDQ4N+xG++sHgKueQ\"",        
      "Keep-Alive": "timeout=5",
      "X-Powered-By": "Express",
    },
    "responseURL": "http://10.22.101.55:5000/api/restaurant", 
    "status": 200,
    "timeout": 0,
    "upload": XMLHttpRequestEventTarget {},
    "withCredentials": true,
  },
  "status": 200,
  "statusText": undefined,
}

Dan pesan kesalahan di konsol + tampilan kesalahan

Peringatan: Jenis prop yang gagal: Jenis prop coordinate tidak valid number dipasok ke MapMarker, diharapkan object. masukkan deskripsi gambar di sini react-native axios react-native-maps

1
Quentin Blanche 10 Mei 2021, 11:33

1 menjawab

Jawaban Terbaik

Solusinya adalah mengubah:

coordinate={restaurant.latitude, restaurant.longitude}

Untuk

coordinate={{latitude: restaurant.latitude, longitude: restaurant.longitude}}

Kesalahan itu karena sintaks saya yang buruk. Saya tidak memberikan garis lintang dan garis bujur dengan benar ke prop koordinat. Dan Koordinat tidak boleh 'null' atau 'undefine'.

1
Quentin Blanche 12 Mei 2021, 12:05