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”。查看调试器会显示“标题”字段已正确更新。如果我修改代码以在其他状态下启动，则工具提示显示将始终为13.047

我做错什么了吗？

Answer 1

使用react-leaflet的<Marker position={[50.63, mlong]}> <Tooltip direction="top" offset={[10, 0]}> {mlong} </Tooltip> </Marker>实现所需的行为

res_df = pd.DataFrame(columns=['cutoff', 'true'])
for i in range(1,int(df['score'].max()+1)):
    temp_df = pd.DataFrame(data={'cutoff': i, 'true': (df['score']>=i).sum()}, index=[i])
    res_df = pd.concat([res_df, temp_df])

res_df
    cutoff true
1       1   12
2       2   11
3       3   11
4       4   10
5       5   10
6       6    9
7       7    8
8       8    6
9       9    2
10     10    1

Demo

Answer 2

useState挂钩的设置者不会立即更改您的值。因此，在致电setMlong((mstate)? 13 : 13.047)时，您使用的不是更新的mstate值，而是旧的值。

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

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

或者在回答这个问题时查看另一种解决方案：

useState set method not reflecting change immediately

React传单标记标题未更新

2 个答案: