直到mouseEnter事件才加载简单的React地图图层

Question

地图渲染和颜色填充也会发生，但只有当鼠标输入事件发生时才会发生。如何在加载时触发？我使用的是react-simple-maps，JSON数据是有效的，因为当鼠标进入时它会加载地图。以下是源代码- Github

  const [tooltipContent, setTooltipContent] = useState("");

  const colorScale = scaleQuantile()
    .domain(props.data.map((d) => d.value))
    .range(COLOR_RANGE);

  const onMouseEnter = (geo, current = { value: "NA" }) => {
    return () => {
      setTooltipContent(`${geo.properties.name}: ${current.value}`);
    };
  };

  const onMouseLeave = () => {
    setTooltipContent("");
  };
  return (
    <div>
      <ReactTooltip>{tooltipContent}</ReactTooltip>

      <ComposableMap
        projectionConfig={PROJECTION_CONFIG}
        projection="geoMercator"
        width={700}
        height={600}
        data-tip=""
      >
        <Geographies geography={INDIA_TOPO_JSON}>
          {({ geographies }) =>
            geographies.map((geo) => {
              const current = props.data.find((s) => {
                return s.id === geo.id;
              });
              return (
                <Geography
                  key={geo.rsmKey}
                  geography={geo}
                  fill={current ? colorScale(current.value) : DEFAULT_COLOR}
                  style={geographyStyle}
                  onMouseEnter={onMouseEnter(geo, current)}
                  onMouseLeave={onMouseLeave}
                />
              );
            })
          }
        </Geographies>
      </ComposableMap>
    </div>
  );
}

Answer 1

我无意中直接改变了状态，并且没有不正确地使用useEffect挂钩