javascript - React、Leaflet - Hooks、setView 和 useRef

Question

谁能帮我梳理一下使用钩子(Hook)更新 View 参数的正确方法？

目前，我正在使用 React 和 Leaflet 创建一个简单的 map :

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 数组更新时更新 map 的中心，所以我根据新的标记数组计算坐标的中心:

...

    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)])
    }

然后，我尝试用另一个钩子(Hook)和一个 ref 更新 map :

    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 实例上设置 View 的基本解决方案:

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)
        },
        []
    )