Question

我正在开发我的第一个应用，一个城市指南应用。

我对 React Native 还是很陌生，我在使用 react-native-maps 时遇到了问题（我认为）。

我正在尝试通过 Axios 查询从我的数据库中获取地图上显示的标记

这是我的 Axios :

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
});

我必须更改我的呼叫 URL，否则我会收到网络错误类型错误 (本地主机 -> 10.22.101.55)

我调用 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,
  },
 });

这就是我在控制台中得到的：

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,
}

以及控制台中的错误信息+错误显示

<块引用>

警告：失败的道具类型：无效的道具 coordinate 类型为 number 提供给 MapMarker，预期为 object。

对我来说，错误是因为我给 <Marker/> 的坐标

预先感谢您的帮助和您的时间！

编辑：错误确实来自坐标，当我手动给出纬度和经度时，一切正常。

Answer 1

解决方案是改变：

coordinate={restaurant.latitude, restaurant.longitude}

到

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

错误是由于我的语法错误造成的。我没有正确地为坐标道具提供纬度和经度。坐标不能为 'null' 或 'undefine'。

React Native：警告：道具类型失败：提供给`MapMarker`的`number`类型的无效道具`coordinate`，预期为`object`

1 个答案: