如何访问此 json 响应对象？

Question

我尝试了许多不同的方法来访问“main”。我已经尝试过 info.main、info["main"]、info["-main"]，但我不知道如何访问它，并且我继续得到未定义的“temp”。 Info.base 工作得很好。

这是我在谷歌浏览器上的组件内部状态的图像。

这是json格式的样子

为什么 info.main.temp 不工作，但 info.base 工作？ 如果我删除 h1 info.main.temp 页面呈现就好了，只要我把它放回去，应用程序就会崩溃。

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

您的初始状态是一个空对象 ({})

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

所以访问该对象的base 或main 是可以的，并且在第一次渲染时每个最初都是undefined，直到状态更新，但尝试更深入，即info.main.temp 将导致错误。

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!!

你可以在更深层的属性上使用一个守卫

info.main && info.main.temp

或者使用optional chaining 来检查main 是否存在，然后再继续temp

info.main?.temp

在任何一种情况下，您可能还希望提供一个备用值，以便 undefined 或 null 等不会泄露到 UI 中

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

或

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

或

info.main?.temp || ""

等等……

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