Javascript 将openstreetmap中的坐标设置为状态

我试图从一个特定的城市获取坐标，并将它们设置为一个州，以用作地图提供者

我很确定这是件愚蠢的事，但我花在这件事上的时间比我想承认的要多

它可以工作，我可以设置状态，我可以控制台。记录坐标，但是，它是第一个null，null。然后是lat，null，最后是lat long。像这样

null null
101.6942371 null
101.6942371 3.1516964

我想将最后两个坐标设置为state，我认为它应该工作，但是，我想将这个状态用作lat和long，如下所示：

  latitude: lat,
 longitude: long,

当我这样做时，我得到一个错误：必须提供经度。我相信这是因为它试图设置null，null作为坐标

代码如下：

import React, { useState, useEffect } from "react";
import MapGL, { GeolocateControl } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { OpenStreetMapProvider } from "leaflet-geosearch";

const Map = (props) => {
  const [long, setLong] = useState(null);
  const [lat, setLat] = useState(null);

  const styles = {
    width: "100%",
    height: "85%",
    position: "absolute",
  };

  useEffect(() => {
    const provider = new OpenStreetMapProvider();
    const fetchData = async () => {
      const results = await provider.search({ query: props.currentCity });
      setLong(results[0].x);
      setLat(results[0].y);

    };

    console.log(long, lat)
    fetchData();
  }, [long, lat]);

  const TOKEN =
    "xxx";

  const [viewport, setViewPort] = useState({
    width: "75%",
    height: 400,
    latitude: lat,
    longitude: long,
    zoom: 12,
  });

  const _onViewportChange = (viewport) => {
    setViewPort({ ...viewport, transitionDuration: 3000 });
  };
  return (
    <div style={{ margin: "0 auto" }}>
      <MapGL
        {...viewport}
        style={styles}
        mapboxApiAccessToken={TOKEN}
        mapStyle="mapbox://styles/mapbox/streets-v9"
        onViewportChange={_onViewportChange}
      ></MapGL>
    </div>
  );
};

export default Map;

我将只使用组件作为

---

谢谢

如果您不希望修复提供程序的前两种状态。search async函数，这可能会起作用：

const fetchData = async () => {
  const results = await provider.search({ query: props.currentCity });
  if (results[0].x && results[0].y) {
    setLong(results[0].x);
    setLat(results[0].y);
    setViewPort({...viewport, 
                    latitude: results[0].y,
                    longitude: results[0].x,});
  }

};

此外，您还可以：

{viewport.latitude && viewport.longitude && <MapGL
    {...viewport}
    style={styles}
    mapboxApiAccessToken={TOKEN}
    mapStyle="mapbox://styles/mapbox/streets-v9"
    onViewportChange={_onViewportChange}
  ></MapGL>}

解决了

放弃了，选择了mapboxgl和openstreetmapprovider的混合

---

我之前没有这么做，真是太傻了。

谢谢，但是没有，什么事也没有发生。问题依然存在。但是，我很好奇，除了结果[0]之外，这看起来很像我已经拥有的。这有什么意义？是什么让你相信这可能奏效？我对这个很陌生，所以我正在努力吸收知识。干杯尝试猜测流程，因为没有工作示例进行故障排除。。。我想我有了更好的理解，我已经更新了我的答案，这可能更准确。我认为一个是你需要停止更新为null，另一个是你需要更新你的视口，因为我看到它只在onViewportChange被触发时才更新，只有视口似乎包含你的坐标，但是如果没有一个有效的示例，很难澄清这一点，如果不起作用，您能创建一个更简单的JSFIDLE吗？是的。我发现这可能是由于，状态被设置为null，并且视口有一些奇怪的地方，正如你所说的，它只在你玩地图时更新。让我为你摆好一把小提琴。谢谢！是否已更新有关视口问题的答案，如果第一次设置失败，可能下一次渲染已中断。。。？