Получить данные из бэкэнда для Google Map

Question

Я следую этому руководству здесь: https://youtu.be/Pf7g32CwX_s о том, как добавить карту Google с помощью response-google-maps. Код на Github: https://github.com/leighhalliday/google-maps-react-demo/blob/master/src/App.js

У меня есть пример, который я запустил, но теперь я хочу получать данные из моего бэкэнда, а не использовать файл json в веб-интерфейсе. Итак, у меня есть эта настройка:

App.js

import React from 'react';

export async function stationsDataFunction() {
  const results = await fetch('http:...) ;
  return results.json();
}

class App extends React.Component {

  constructor(){
    super();
    this.state = {

    }
  }

  render(){
   return(
    <div className="App">
      <MapComponent/>
    </div>
    )
  }
}
export default App;

MapComponent.js

import React, {useState} from 'react';
import { GoogleMap, Marker, withScriptjs, withGoogleMap, InfoWindow } from "react-google-maps"
import {stationsDataFunction} from './App';

function Map(){
    console.log(stationsDataFunction()); // Line 14
    const stationsData = stationsDataFunction().then(response => {console.log(response); return response;}); // Line 15

    const [selectedStation, setSelectedStation] = useState(null); 
  return(
    <GoogleMap // Line 19
        defaultZoom={10}
        defaultCenter={{ lat: 63.0503, lng: 21.705826}}
      >
        {stationsData.features.map(station => (
          <Marker 
          key={station.properties.PARK_ID}
          position={{
            lat: station.geometry.coordinates[1], 
            lng: station.geometry.coordinates[0]
          }}
          onClick={(() => {
            setSelectedStation(station);
          })}
        />
        ))}

      //... more code here 

Я возвращаю данные из бэкэнда в const StationData, но кажется, что ответ приходит слишком поздно. Я получаю эту ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'map' из неопределенного на карте (MapComponent.js: 19)

До ошибки консоль распечатывает:

MapComponent.js: 14 Promise {pending}

После ошибки консоль распечатывает:

MapComponent.js: 15 {type: "FeatureCollection", crs: {…}, features: Array (2)}

Я не могу понять, как решить эту проблему.

---

ОБНОВЛЕНИЕ С РАБОЧИМ КОДОМ

Рабочий код приложения.js

Экспортируемая функция выглядит так:

export async function stationsDataFunction() {

  const results = await fetch('http://localhost:4000/api/myData/stationNames') ;
  return results.json();
}

MapComponent.js РАБОЧИЙ КОД

import React, {useState, useEffect}  from 'react';
import { GoogleMap, Marker, withScriptjs, withGoogleMap, InfoWindow } from "react-google-maps"
import {stationsDataFunction} from './App';



function Map(){

  const [stationsData , setStationsData] = useState({ features: [] });
  const [selectedStation, setSelectedStation] = useState(null); 

  async function fetchStationsData() {
    const json = await stationsDataFunction();
    setStationsData(json);
  }
  useEffect(() => {
    fetchStationsData();
  }, []);


  return(
    <GoogleMap
        defaultZoom={10}
        defaultCenter={{ lat: 63.0503, lng: 21.705826}}
      >
        {stationsData.features && stationsData.features.map(station => (
          <Marker 
          key={station.properties.PARK_ID}
          position={{
            lat: station.geometry.coordinates[1], 
            lng: station.geometry.coordinates[0]
          }}
// More code here

Answer 1

Правильно, данные еще не загружены после рендеринга маркеров.

Список изменений:

а) init по умолчанию значение, подобное этому (для предотвращения 'map' of undefined error):

const [stationsData, setStationsData] = useState({ features: [] });

b) используйте Effect Hook для извлечения данных:

useEffect(() => {
   fetchStationsData();
}, []);

, где

async function fetchStationsData() {
   const json = await stationsDataFunction();
   setStationsData(json);
}

Пример * * тысяча двадцать-один

function Map(props) {
  const [data, setData] = useState([{ features: [] }]);

  async function fetchData() {
    const results = await fetch(
      "https://raw.githubusercontent.com/leighhalliday/google-maps-react-demo/master/src/data/skateboard-parks.json"
    );
    const json = await results.json();
    setData(json.features)
  }

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <GoogleMap defaultZoom={props.zoom} defaultCenter={props.center}>
      {data.map(item => (
        <Marker key={item.properties.PARK_ID} position={{
          lat: item.geometry.coordinates[1], 
          lng: item.geometry.coordinates[0]
        }} />
      ))}
    </GoogleMap>
  );
}

Answer 2

Проблема в вашем коде в том, что у вас есть асинхронный вызов здесь

const stationsData = stationsDataFunction().then(response => {console.log(response); return response;});

Но когда вы пытаетесь получить доступ к данным stationsData.features, features не определено, потому что обещание еще не выполнено,

Что вы можете сделать, это обычный рендеринг

{stationsData.features && stationsData.features.map(...)}

Но, возможно, это не решит вашу проблему, и вам нужно будет использовать useEffect hook.

import React, {useState, useEffect} from 'react';

function Map(){
    const [stationsData , setStationsData] = useState({}); 
    const [selectedStation, setSelectedStation] = useState(null); 

    useEffect(() => { 
        stationsDataFunction().then(response => {console.log(response); setStationsData(response);});
    }, [])

    return(
        <GoogleMap // Line 19
            defaultZoom={10}
            defaultCenter={{ lat: 63.0503, lng: 21.705826}}
        >
            {stationsData.features && stationsData.features.map(...)
        ...