Question

有人可以帮我找出使用钩子更新视图参数的正确方法吗？

当前，我使用React和Leaflet创建一个简单的地图：

import React, { useState, useEffect, useRef } from 'react'
import { useSelector } from 'react-redux'
import L from 'leaflet'

function SmallMap() {

    const markers = useSelector(state => state.markers.markers) || []
    const [latLng, setLatLng] = useState([32.77, -99.8])

    // create map
    const mapRef = useRef()
    useEffect(() => {
        mapRef.current = L.map('map', {
            center: latLng,
            zoom: 7,
            layers: [
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: ''
                }),
            ]
        })
    }, [])

    // add layer to mapRef
    const layerRef = useRef(null)
    useEffect(() => {
        layerRef.current = L.layerGroup().addTo(mapRef.current)
    }, [])

    // update points in layerRef
    useEffect(
        () => {
            markers.forEach(point => {
                L.marker([
                    point.location.coordinates[1],
                    point.location.coordinates[0]
                ],
                    {
                        title: point._id
                    })
                    .bindPopup(point.type)
                    .addTo(layerRef.current)
            })
        },
        [markers]
    )

    return <div id="map"></div>
}

export default SmallMap

...

现在-我想在更新markers数组时更新地图的中心，因此我将基于新的标记数组来计算坐标的中心：

...

    const setCenter = (markers) => {
        const ave = (array) => array.reduce((a, b) => a + b, 0) / array.length
        const lats = []
        const lngs = []

        if (markers) {
            markers.map((point) => (
                lats.push(point.location.coordinates[1])
            ))
            markers.map((point) => (
                lngs.push(point.location.coordinates[0])
            ))
        }

        setLatLng([ave(lats), ave(lngs)])
    }

然后，我尝试使用另一个挂钩和一个参考来更新地图：

    const centerRef = useRef(null)
    useEffect(() => {
        setCenter(markers)
        centerRef.current = L.map
            .setView(latLng, 7)
            .addTo(mapRef.current)
    },
        [markers]
    )

但是我遇到一个错误：

TypeError: leaflet__WEBPACK_IMPORTED_MODULE_2___default.a.map.setView is not a function

但是我很确定它是一个函数-

https://leafletjs.com/reference-1.6.0.html#map-setview

React and Leaflet

Answer 1

所以我解决了这个问题-这是在mapRef实例上设置视图的基本解决方案：

useEffect(
    () => {
        mapRef.current.setView(mapCenter, 6)
    }, 
    [markers]
)

更具体地说，我不需要创建其他useRef实例。另外，我还稍微更改了mapRef实例的格式。

    // create map

    useEffect(
        () => {
            mapRef.current = L.map('map', {
                layers: [
                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
                ]
            })
            .setView(mapCenter, 7)
        },
        []
    )

React，Leaflet-挂钩，setView和useRef

1 个答案: