时间戳

首页 > 解决方案 > GeoIPify 和 React-leaflet 无法获取纬度和经度

reactjs - GeoIPify 和 React-leaflet 无法获取纬度和经度

问题描述

刷新页面后加载页面时出现“错误：无效的 LatLng 对象：（未定义，未定义）”错误。当我第一次进入{[IPdata?.location?.lat, IPdata?.location?.lng]}时，它呈现出来。但是我再次刷新后出现错误。如果我直接输入纬度和经度值而不是对象，则页面加载正常。其他数据也加载正常，除了IPdata?.location?.lat, IPdata?.location?.lng. 如果我从页面中删除这两个值，一切正常。请在这里需要帮助！

不传递纬度和经度值

指定时{[IPdata?.location?.lat, IPdata?.location?.lng]}

import React, { useEffect, useState } from "react";
import Result from "../src/Components/Result";
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

function App() {
  const APP_KEY = "personalKey";

  const [IPdata, SetIPData] = useState([]);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("8.8.8.8");
  const [loaded, setLoaded] = useState(false);
  

  useEffect(() => {
    getIp();
    setLoaded(true);

  }, [query]);

  async function getIp() {
    const response = await fetch(`https://geo.ipify.org/api/v1?apiKey=${APP_KEY}&ipAddress=${query}`);
    const data = await response.json();
    console.log(data);
    SetIPData(data)
  }


  function handleChange(event) {
    setSearch(event.target.value);
    console.log(event.target.value);

  }

  function handleSubmit(event) {
    event.preventDefault();
    setQuery(search);
    setSearch('');

  }

    return (
      loaded ? (
      <div>
        <div className="container">
  
          <div className="input-section">
            <h1 className="header"> IP Address Tracker</h1>
  
            <form onSubmit={handleSubmit} className="search-form">
              <input className="search-input" type="text" placeholder="Search for any IP address or domain" onChange={handleChange} />
              <button className="search-button" type="submit"> Go! </button>
            </form>
  
          </div>
  
          <div className="result-container">
  
            <Result
              heading={"IP Address"}
              searchResult={IPdata.ip}
            />
  
            <Result
              heading={"Location"}
              searchResult={IPdata?.location?.country}
            />
  
            <Result
              heading={"Timezone"}
              searchResult={"UTC" + IPdata?.location?.timezone}
            />
  
            <Result
              heading={"ISP"}
              searchResult={IPdata.isp}
            />
  
          </div>
          
        </div>
        
        <MapContainer center={[IPdata?.location?.lat, IPdata?.location?.lng]} zoom={13} scrollWheelZoom={true}>
            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={[IPdata?.location?.lat, IPdata?.location?.lng]}>
              <Popup>
                Your IP Location
              </Popup>
            </Marker>
          </MapContainer>
  
      </div> ) : <p>Loading...</p>
      
    )
    
}

export default App;

标签： reactjsapirestreact-leaflet

解决方案

  {IPdata.location && (
    <MapContainer
      center={[IPdata.location?.lat, IPdata.location?.lng]}
      zoom={13}
      scrollWheelZoom={true}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[IPdata?.location?.lat, IPdata?.location?.lng]}>
        <Popup>Your IP Location</Popup>
      </Marker>
    </MapContainer>
  )}

https://codesandbox.io/s/tejan-dzedk

推荐阅读