我需要从api获取数据并将其显示在工具提示中。在我的应用中,我使用的地图是当您将鼠标悬停在某个国家时,会显示工具提示。仅当我不从api获取信息时,工具提示才会显示。这是代码:
const MapChart = ({ setTooltipContent }) => {
const [countries, setCountries] = useState([]);
useEffect(() => {
axios.get('https://api.covid19api.com/summary')
.then(res => {
const {
Countries,
Global,
Date
} = res.data;
setCountries(Countries)
})
}, []);
if(countries.length === 0){
return <div>Loading...</div>
}
return (
<>
<ComposableMap data-tip="" projectionConfig={{ scale: 200 }}>
<ZoomableGroup>
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map(geo => (
<Geography
key={geo.rsmKey}
geography={geo}
onMouseEnter={() => {
const { NAME, POP_EST } = geo.properties;
setTooltipContent(`${NAME} - ${rounded(POP_EST)}`);
}}
onMouseLeave={() => {
setTooltipContent("");
}}
style={{
default: {
fill: "#D6D6DA",
outline: "none"
},
hover: {
fill: "blue",
outline: "none"
},
pressed: {
fill: "red",
outline: "none"
}
}}
/>
))
}
</Geographies>
</ZoomableGroup>
</ComposableMap>
</>
);
};
当我在useEffect中删除行setCountries(Countries)
时,将显示工具提示(我也将if语句注释掉以使其工作)。我也使用react-simple maps
来显示地图。这是我的App.js:
const App = () => {
const [content, setContent] = useState("");
return (
<div>
<MapChart setTooltipContent={setContent} />
<ReactTooltip>{content}</ReactTooltip>
</div>
)
}
据我所见,我认为问题是MapChart不能在其中具有状态,即当react-tooltip不显示时。