反应传单标记标题不更新

Question

我正在尝试动态更新标记的标题（鼠标悬停时的工具提示内容...），但是该字段停留在初始化时的状态。

这是一个简化的测试用例：

// @flow
import {
    Box, Button
} from '@material-ui/core'
import React, { useState } from 'react';
import { Map, TileLayer, Marker } from 'react-leaflet'
import "leaflet/dist/leaflet.css"
import L from 'leaflet';
import icon from 'leaflet/dist/images/marker-icon.png';

let DefaultIcon = L.icon({ iconUrl: icon });
L.Marker.prototype.options.icon = DefaultIcon;

function Test(props) {
    const [mstate, setMstate] = useState(false)
    const [mlong, setMlong] = useState(13)
    // let mlong = (mstate) ? 13.047 : 13

    const flipMstate = () => {
        setMstate(!mstate)
        setMlong((mstate)? 13 : 13.047)
    }

    return (
        <Box component='div' style={{ width: '80%', height: '80%', position: 'relative', }}>
            <Button onClick={flipMstate} style={{ height: '10%' }} >
                Change marker
            </Button>
            <Map
                preferCanvas={true}
                style={{ height: '90%' }}
                center={[50.63, 13.047]}
                zoom={13}
                minZoom={3}
                maxZoom={18}
            >
                <TileLayer
                    attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?"
                />
                <Marker
                    title={mlong}
                    position={[50.63, mlong]}
                />
            </Map>
        </Box>
    )
}

export default Test

单击按钮时，标记会按预期移动。但如果您将鼠标悬停在标记上，工具提示将始终显示“13”。查看调试器显示 "title" 字段已正确更新。如果我修改代码以其他状态启动，工具提示显示将始终为 13.047

我做错了什么吗？

Answer 1

useState hook 的设置器不会立即更改您的值。因此，当您调用 setMlong((mstate)? 13 : 13.047) 时，您使用的不是更新后的 mstate 值，而是旧值。

尝试添加 useEffect 钩子并在那里处理依赖状态：

useEffect(() => {
    setMlong((mstate)? 13 : 13.047)
}, [mstate]);

或者看看这个问题的另一个答案：

Answer 2

使用 react-leaflet 的 Tooltip 实现所需的行为

 <Marker position={[50.63, mlong]}>
     <Tooltip direction="top" offset={[10, 0]}>
       {mlong}
     </Tooltip>
 </Marker>

Demo

反应传单标记标题不更新

React leaflet Marker title doesn't update

javascript

leaflet

reactjs

react-leaflet