如何访问这个 json 响应对象？

Question

I have tried many different ways to access "main". I have tried info.main, info["main"], info["- main"], I can't figure out how to access it and I continue to get "temp" of undefined. Info.base works just fine.

Here is an image of the state inside my components on google chrome.

Here is what it looks like in json format

Why is info.main.temp not working, but info.base is? If i remove the h1 info.main.temp the page renders just fine, as soon as I put it back the app crashes.

function Body(props) {
  const [location, setLocation] = useState({});
  const [info, setInfo] = useState({});

  function getGeo() {
    navigator.geolocation.getCurrentPosition(function (position) {
      setLocation({
        lat: position.coords.latitude,
        long: position.coords.longitude,
      });
    });
  }

  useEffect(() => {
    getGeo();
    if (location.lat === undefined || location.long === undefined) {
      return;
    }
    fetch(
      `http://api.openweathermap.org/data/2.5/weather?lat=${location.lat}&lon=${location.long}&units=metric&appid=key`
    )
      .then((response) => {
        return response.json();
      })
      .then((result) => {
        setInfo(result);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [location.lat, location.long, setInfo]);
return (
    <>
      <img className="adv" src="image1.png" />
      <div className="grid-block-container">
        <div className="city-weather">
          <div className="info-container">
            <h2>{info.base} Weather</h2>
            <p>as of 10:31 pm CDT</p>
            <h1>{info.main.temp}&#176;</h1>
            <h2>Party Cloudy</h2>
            <h3>10% chance of rain through 11pm</h3>
          </div>

Answer 1

Your initial state is an empty object ( {} )

const [info, setInfo] = useState({});

so accessing base or main of that object is ok and each would initially be undefined on the first renders until state is updated, but trying to go deeper, ie info.main.temp will result in the error.

 const info = {}; console.log('info', info); // {} console.log('info.base', info.base); // undefined console.log('info.main', info.main); // undefined console.log('info.main.temp', info.main.temp); // error!!

You can use a guard on the deeper property

info.main && info.main.temp

Or use optional chaining to check if main exists before continuing on to temp

info.main?.temp

In either case you likely also want to provide a fallback value so undefined or null , etc.. aren't leaked out to the UI

(info.main && info.main.temp) || "Loading..."

or

(info.main && info.main.temp) || ""

or

info.main?.temp || ""

etc...

 const info = {}; console.log('info', info); // {} console.log('info.main.temp', info.main?.temp); // undefined console.log('info.main.temp', info.main?.temp || 'fallback'); // fallback