从api提取数据时未显示react-tooltip

时间:2020-06-14 06:09:14

标签: javascript reactjs react-hooks react-tooltip

我需要从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不显示时。

0 个答案:

没有答案