Javascript 反应传单标记标题不'；t更新

我试图动态更新标记的标题（鼠标悬停在上方时的工具提示内容…），但该字段仍停留在初始化时的状态

下面是一个简化的测试用例：

// @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

/@flow
进口{
按钮盒
}来自“@material ui/core”
从“React”导入React，{useState}；
从“反应传单”导入{Map，tillelayer，Marker}
导入“传单/目录/传单.css”
从“传单”进口L；
从“传单/dist/images/marker icon.png”导入图标；
让DefaultIcon=L.icon（{iconUrl:icon}）；
L.Marker.prototype.options.icon=DefaultIcon；
功能测试（道具）{
const[mstate，setMstate]=useState（false）
const[mlong，setMlong]=useState（13）
//设mlong=（mstate）？13.047:13
常量flipMstate=（）=>{
setMstate（！mstate）
setMlong（（mstate）？13:13.047）
}
返回(
变更标记
)
}
导出默认测试

单击按钮时，标记会移动，正如它应该移动一样。但如果将鼠标悬停在标记上，工具提示将始终显示“13”。查看调试器显示“title”字段得到了正确更新。如果将代码修改为在其他状态下启动，则工具提示显示将始终为13.047

---

我做错了什么吗？

useState hook的设置程序不会立即更改您的值。 因此，当您调用

setMlong（（mstate）？13:13.047）

时，您使用的不是更新的

mstate

值，而是旧值

尝试在那里添加

useffect

钩住并处理依赖状态：

useffect（（）=>{
setMlong（（mstate）？13:13.047）
}，[mstate]）；

或者看看回答这个问题的另一个解决方案：

---

使用react传单的

工具提示来实现所需的行为

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


{mlong}

谢谢你的回答。在这个例子中，我的意图确实是在这个测试逻辑中使用“旧”或以前版本的mstate，所以一切都是按预期的那样进行的。我的“mstate”值在13和13.047之间切换。但这并不反映在标记工具提示中，只反映在它的位置上。非常感谢您的回答。这确实可以做到，但我更多的是寻找根本原因，而不是寻找解决办法（对一些根本不起作用的事情感到不安，怀疑我的方法是否真的出了问题，或者我只是偶然发现了一个错误）。我不确定你是否可以这样做（如果有人知道另一种方法，请与我们分享）因为如果查看
updateLabletElement
，当传递的道具更改时，它会响应并触发道具的更新，因此没有必要使用
title
，因为没有本地传单方法来更改标题。例如，要更改标记的图标属性（它是react传单组件中的一个道具）
setIcon
方法，将调用该方法，该方法是在将以前的图标道具与当前的图标道具进行比较后的本机传单方法。