我正在尝试建立一个地图组件，以显示带有存储在我的postgres /节点后端的地理坐标的标记。 我可以在我的postgres / postgis数据库中插入geojson，因为我在后端设置了可以正常工作的CRUD方法，但是我不知道要添加到地图组件中的哪些代码才能在转到组件选项卡时加载geojson文件。

我该如何添加一种方法进入地图组件以从数据库中提取geojson？ 我认为我的动作和服务文件设置正确，并且我认为动作文件中的pullScubaSchools类应导入到地图容器中。

map.component.js

import React, { Component, useState } from 'react';
import { MapContainer, TileLayer, Layer, Marker, Popup, useMapEvents, Map, GeoJSON } from 'react-leaflet';
import "leaflet/dist/leaflet.css";
//import mapData from "../test/mapData.json";
import { pullScubaSchools } from '../actions/scubaSchool.action'


//Layer.geoJSON(pullScubaSchools).addTo(ScubaDivingMap);


export class ScubaDivingMap extends Component {

    //componentDidMount() {
    //    console.log(mapData);
    //}

    render() {

        return(

            <div>
                <MapContainer
                    center={{ lat: 41.505, lng: -0.09 }}
                    zoom={3}
                    scrollWheelZoom={false}>
                    <GeoJSON
                        //style={this.countryStyle}
                        data={pullScubaSchools.diveSchoolGeo}
                        //onEachFeature={this.onEachCountry}
                    />
                    <TileLayer
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <Marker position={[pullScubaSchools]}>
                    <Popup>
                        A pretty CSS3 popup. <br /> Easily customizable.
                    </Popup>
                </Marker>
                </MapContainer>
            </div>
        );
    }
}

export default ScubaDivingMap;

diveschool.service

import axios from 'axios';

const API_URL = "http://localhost:5002/api/diveschool/";

// posts register details to backend
class diveSchoolService {

    scubaSchoolLocations = (diveSchoolName, diveSchoolLocation, diveCertificatesOfferedID, diveSchoolGeo) => {
        return axios.get(API_URL + "diveschoollist", {
            diveSchoolName,
            diveSchoolLocation,
            diveCertificatesOfferedID,
            diveSchoolGeo
        });
    };

export default new diveSchoolService();

scubaSchool.action.js

import { diveSchoolService } from "../services/diveSchool.service";
import { failed_data_load, set_message, data_load_successful } from "./types.action";

export const pullScubaSchools = (dispatch) => {
    return diveSchoolService.scubaSchoolLocations.then(
        (data) => {
            dispatch({
                type: data_load_successful,
                payload: { scubaSchools: data },
            });

            return Promise.resolve();
        },
        (error) => {
            const message =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString();

            dispatch({
                type: failed_data_load,
            });

            dispatch({
                type: set_message,
                payload: message,
            });

            return Promise.reject();
        }
    );
};

我的错误输出如下：

TypeError: latlng is null
project
C:/Users/James Greene/WebstormProjects/softwaredevproject/SustainableScuba/WebApp/src/geo/projection/Projection.SphericalMercator.js:22

  19 | MAX_LATITUDE: 85.0511287798,
  20 | 
  21 | project: function (latlng) {
> 22 |  var d = Math.PI / 180,
     | ^  23 |      max = this.MAX_LATITUDE,
  24 |      lat = Math.max(Math.min(max, latlng.lat), -max),
  25 |      sin = Math.sin(lat * d);