javascript - 重新加载页面时出现状态未定义错误

Question

第一次一切正常，但在我刷新页面时出现错误和未定义状态而且如果我评论 h1 和 p 标签并取消评论然后错误解决并再次点击我刷新

这是我的代码

import { useState, useEffect } from "react";

function App() {
  var [state, setState] = useState({});

  useEffect(() => {
    fetch(
      "https://api.openweathermap.org/data/2.5/find?q=kolkata&units=metric&appid=907c99e1a96b5d38487d8d9c19b413fc"
    )
      .then((doc) => {
        return doc.json();
      })
      .then((doc) => {
        setState(doc);
      });
  }, []);

  return (
    <div className="App">
      <div className="welcome">
        <h1>
          {state.list[0].main.temp}
          <sup> o</sup>C
        </h1>
        <p>Feels Like {state.list[0].main.feels_like}</p>
        <img src="https://openweathermap.org/img/w/50d.png" alt="haze" />
      </div>
    </div>
  );
}

export default App;

Answer 1

您的状态最初是一个空对象，您必须进行检查，就像我在下面所做的那样。

import { useState, useEffect } from "react";

function App() {
  var [state, setState] = useState({});

  useEffect(() => {
    fetch(
      "https://api.openweathermap.org/data/2.5/find?q=kolkata&units=metric&appid=907c99e1a96b5d38487d8d9c19b413fc"
    )
      .then((doc) => {
        return doc.json();
      })
      .then((doc) => {
        setState(doc);
      });
  }, []);

  return (
    <div className="App">
      <div className="welcome">
      {Object.keys(state).length>0?<><h1>
          {state.list[0].main.temp}
          <sup> o</sup>C
        </h1>
        <p>Feels Like {state.list[0].main.feels_like}</p></>:""}
        
        <img src="https://openweathermap.org/img/w/50d.png" alt="haze" />
      </div>
    </div>
  );
}

export default App;

或者如果你想避免 Object.keys 使默认状态 null

import { useState, useEffect } from "react";
    
    function App() {
      var [state, setState] = useState(null);
    
      useEffect(() => {
        fetch(
          "https://api.openweathermap.org/data/2.5/find?q=kolkata&units=metric&appid=907c99e1a96b5d38487d8d9c19b413fc"
        )
          .then((doc) => {
            return doc.json();
          })
          .then((doc) => {
            setState(doc);
          });
      }, []);
    
      return (
        <div className="App">
          <div className="welcome">
          {state?<><h1>
              {state.list[0].main.temp}
              <sup> o</sup>C
            </h1>
            <p>Feels Like {state.list[0].main.feels_like}</p></>:""}
            
            <img src="https://openweathermap.org/img/w/50d.png" alt="haze" />
          </div>
        </div>
      );
    }
    
    export default App;