Question

我从反应开始，我想创建一个系统，当我单击由“ 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>
        )
    };

}

这是我的组件Map：

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

Answer 1

其中一种方法是，应将坐标和数据移动到父组件状态，然后将它们作为道具传递给MapLeaflet和Meteo组件。创建新方法，该方法将在标记位置更新时更新坐标，然后获取数据。这是一个示例https://codesandbox.io/s/x3p2kwnzvz-它没有地图，我使用Math.random生成数据

点击地图后刷新调用API

1 个答案: