0 
export default function Home() {
    const [tooltip, setTooltip] = useState(false);

    return (
        <DeckGL
            initialViewState={viewport}
            controller={true}
            ContextProvider={_MapContext.Provider}
            width="100vw"
            height="100vh"
        >
            <StaticMap
                mapStyle={"mapbox://styles/mapbox/streets-v11"}
                mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
            />
            <Marker
                latitude={currentLocation.lat}
                longitude={currentLocation.long}
            >
                <Flex
                    onMouseEnter={() => setTooltip(true)}
                    onMouseLeave={() => setTooltip(false)}
                >
                    {tooltip ? <Box2 /> : <Box1 />}
                </Flex>
            </Marker>
            )}
        </DeckGL>
    );
}

我知道关于这个问题有很多答案，但我似乎没有让它发挥作用。

所以我的地图框上有一个标记，我有一个状态变量“工具提示”。如果鼠标悬停在标记上并将其设置为真，当它离开时将其设置为假。

如果我用 console.log 替换“setTooltip(true)}”它可以完美地工作，所以我不知道为什么状态没有改变。

如果它是 true ()，我想显示一个框，如果它是 false ()，则显示另一个框。

我究竟做错了什么？

4

0 回答 0