添加方法从 postgres / node 从 geojson 提取数据以显示在我的反应 leaflet map

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

我将如何 go 关于将方法添加到 go 到我的 map 组件中以从我的数据库中提取 geojson？ 我认为我的操作和服务文件设置正确，我认为我的操作文件中的 pullScubaSchools class 应该导入到 map 容器中。

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;

潜水学校服务

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

我的错误 output 如下：

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