在 ReactJS 中从 Geo ipify API 映射数据时出错

Question

Geoipify data Screenshot

I am getting error that "Cannot read property 'country' of undefined" when I load page after I refresh page. When I first entered {IPdata.location.country} it rendered. But after I refreshed again there was error. Need help here please!

Update : I am getting this error only for IPdata.location.country and IPdata.location.timezone. Page is rendering fine with IPdata.ip and IPdata.isp

const [IPdata, SetIPData] = useState([]);

  useEffect( () => {
    getIp()
  },[]);

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

  return (
    <div>
      <div className="container">
        <div className="input-section">
          <h1 className="header"> IP Address Tracker</h1>

          <form className="search-form">
            <input className="search-input" type="text" placeholder="Search for any IP address or domain" />
            <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>
    </div>

Answer 1

try adding -

const [loaded, setLoaded] = useState(false);

useEffect(()=>{
setLoaded(true);
},[IPdata])

and for your render just check if loaded is true or not -

return (
loaded ? (
    <div>
      <div className="container">
        <div className="input-section">
          <h1 className="header"> IP Address Tracker</h1>

          <form className="search-form">
            <input className="search-input" type="text" placeholder="Search for any IP address or domain" />
            <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>
    </div>) : <p>Loading...</p>

Looks like data is being rendered before loading.