Неверный последний объект - React Leaflet - PullRequest
Новая
       57

Неверный последний объект - React Leaflet

0 голосов
/ 19 апреля 2020 
  const [geoData, setGeoData] = useState([]);

  useEffect(() => {
    (async () => {
      const forGeoCode = await axios(
        "https://api.opencagedata.com/geocode/v1/json?q=United%20States&key={accessToken}&language=en&pretty=1"
      );
      setGeoData(forGeoCode.data.results[0].geometry);
    })();
  }, []);
  console.log(geoData.geometry);
  return (
    <div>
      <Map center={[52.6376, -1.135171]} zoom={12}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <Marker position={[geoData.lat, geoData.lng]} />
      </Map>

Приведенный выше код дает мне следующую ошибку: Ошибка: недопустимый объект LatLng: (не определено, не определено)

console.log печатает по долготе и широте, но я все еще получаю ошибку.

Ожидаемое поведение: возьмите Соединенные Штаты в качестве входных данных и верните их долготы и широты и нанесите их на карту

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

Вы инициализируете geoData как массив пустых []

Вы должны инициализировать: 

const [geoData, setGeoData] = useState({lat:null,lng:null});

И взамен вашего компонента вы должны изменить этот маркер только для рисования, когда geoData lat и lng отличаются от нуля (это было бы, когда вы получаете данные в ответном топоре ios): 

return (
    <div>
      <Map center={[52.6376, -1.135171]} zoom={12}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {geoData.lat && geoData.lng && <Marker position={[geoData.lat, geoData.lng]} />}
      </Map>

И в useEffect я рекомендую вам использовать обещание с then и catch для улучшения Пользовательский опыт. Только в этом случае вы должны использовать setGeoData и перезаписывать свойства lat и lng

useEffect(() => {
      axios.get(
        "https://api.opencagedata.com/geocode/v1/json?q=United%20States&key={accessToken}&language=en&pretty=1"
      ).then(response => {
       // I expect in response object geometry, change by the correct route
       setGeoData(response.data.geometry);
      }).catch(err => {
        console.log("error",err);
      });
  }, []);

-------- СЛЕДУЮЩИЙ ВОПРОС --------

Если вы хотите редактировать стили карты.

Как вы можете видеть в документах в React-Leaflet: Ссылка здесь

Вы можете добавить реквизиты, такие как className или style.

Результатом будет 

<Map style={{width:"400px",height:"600px"}}>
...
0 голосов
/ 19 апреля 2020 
interface Coords {
  lat: number;
  lng: number;
}

const [geoData, setGeoData] = useState<Coords>({
    lat: 52.6376,
    lng: -1.135171,
  });

Вам нужно инициализировать значения lat и lng. Надеюсь это поможет. благодарю вас.

...