Обновить вызов API после нажатия на карту - PullRequest
Новая
       8

Обновить вызов API после нажатия на карту

0 голосов
/ 03 января 2019

Я начинаю реагировать и хочу создать систему, которая при нажатии на мою карту, создаваемую модулем "React-Leaflet", модифицирует мой Маркер.После этого клика я хочу вызвать Api для обновления данных в моем компоненте Weather.Как я могу сделать ?Можете ли вы помочь мне, пожалуйста?

Вот мой компонент Погода: 

import './Meteo.css';
import React, { Component } from 'react';
import axios from 'axios';
import { getLat, getLng } from '../../Store.js';

export default class Meteo extends Component {
    constructor(props) {
        super(props);

        this.state = {
            temp: "",
            pressure: "",
            humidity: "",
            temp_min: "",
            temp_max: "",
        }
    }

    componentDidMount() {
        const lat = getLat();
        const lng = getLng();

        axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${APIKEY}`)
            .then(res => {
                const meteo = res.data;
                console.log("Meteo" + meteo);
                this.setState({ 
                    temp: meteo.main.temp,
                    pressure: meteo.main.pressure,
                    humidity: meteo.main.humidity,
                    temp_min: meteo.main.temp_min,
                    temp_max: meteo.main.temp_max,
                });
            })
    }

    render() {
        return (
            <p>Meteo</p>
        )
    };

}

Вот мой компонент Карта: 

import './Map.css';
import React, { Component } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import L from "leaflet";
import { getLat, getLng, setLat, setLng } from '../../Store.js';

const customMarker = new L.icon({
  iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png",
  iconSize: [25, 41],
  iconAnchor: [13, 0]
});

export default class MapLeaflet extends Component {

    constructor(props) {
        super(props);
        this.state = {
            lat: getLat(),
            lng: getLng(),
        }
    }

    updateMarker = (e) => {
        setLat(e.latlng.lat);
        setLng(e.latlng.lng);
        this.setState({ 
            lat: e.latlng.lat,
            lng: e.latlng.lng,
        });
    }

    render() {
        const position = [this.state.lat, this.state.lng]
        return (
            <div className="map">
                <Map center={position} zoom={13} className="map" onClick={this.updateMarker} >
                    <TileLayer
                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <Marker position={position} icon={customMarker}>
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </Map>
            </div>
        )
    }
}

А вот мой магазин: 

const coord = {
    lat: 51.505,
    lng: -0.09
}

export function getLat(){
    return coord.lat;
}

export function getLng(){
    return coord.lng;
}

export function setLat(lat){
    coord.lat = lat;
}

export function setLng(lng){
    coord.lng = lng;
}

1 Ответ

0 голосов
/ 04 января 2019

Один из способов заключается в том, что вы должны переместить координаты и данные в состояние родительского компонента, а затем передать их в качестве реквизитов компонентам MapLeaflet и Meteo.Создайте новые методы, которые будут обновлять координаты при обновлении позиции маркера, а затем извлекать данные.Вот пример https://codesandbox.io/s/x3p2kwnzvz - это без карты, и я использую Math.random для генерации данных

...