javascript - ReactJS:如何在页面加载上设置默认 api 数据？

Question

我只想在页面首次加载时设置默认数据，例如“istanbul”。我尝试将数据放入useState("");但它当我在 input 为空时单击按钮时有效。我需要创建一个像 setData 这样的新变量吗？所以，这是我的代码:

    const App = () => {
      const [temperature, setTemperature] = useState("");
      const [city, setCity] = useState("istanbul");
      const [desc, setDesc] = useState("");
      const [name, setName] = useState("");
      const [humidity, setHumidity] = useState("");
      const [visibility, setVisibility] = useState("");
      const [windspeed, setWineSpeed] = useState("");
      const [wicon, setWicon] = useState("");
      const getWeatherData = () => {
        axios({
          method: "GET",
          url: `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=myapikey`,
        })
          .then((response) => {
            setTemperature(Math.round(response.data.main.temp - 273.15));
            setDesc(response.data.weather[0].description);
            setName(response.data.name);
            setHumidity(response.data.main.humidity);
            setVisibility(response.data.visibility / 1000);
            setWineSpeed(response.data.wind.speed);
            setWicon(response.data.weather[0].icon);
            console.log(response);
          })
          .catch((error) => {});
      };
    
      return (
<div className="background">
      <div className="container">
        <form id="content" autoComplete="off">
          <input
            type="text"
            name="input"
            className="Search-box"
            onChange={(e) => setCity(e.target.value)}
          />
          <span></span>
        </form>
        <button
          className="searchbtn"
          onClick={() => {
            getWeatherData(city);
          }}
        >
          Search
        </button>
        <div id="card" className="weather">
          <div className="details">
            <div className="temp">
              {temperature}
              <span>&deg;</span>
            </div>
            <div className="right">
              <div id="summary">{desc}</div>
              <div style={{ fontWeight: "bold", marginTop: "4px"}}>{name}</div>
            </div>
          </div>
          <img
            className="weatherimg"
            alt="image1"
            src={`http://127.0.0.1:5500/src/${wicon}.svg`}
          />
          <div className="infos">
          <img alt="humidity1" className="humidityimg" style={{width:"5",height:"5"}} src="http://127.0.0.1:5500/src/humidity.svg"></img>
            <div className="humidity" >Humidity {humidity}%</div>
          <img alt="visibility1" className="visibilityimg" style={{width:"5",height:"5"}} src="http://127.0.0.1:5500/src/visibility.svg"></img>
            <div className="visibility">Visibility {visibility} km</div>
            <img alt="windspeed1" className="windimg" style={{width:"5",height:"5"}} src="http://127.0.0.1:5500/src/wind.svg"></img>
            <div className="windspeed">Wind Speed {windspeed} km</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

Answer 1

为了防止它在第一次渲染中为空，您还需要添加 city 作为值:

<input
  type="text"
  name="input"
  className="Search-box"
  value={city}
  onChange={(e) => setCity(e.target.value)}
/>;