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)}
/>;

Answer 2

解决方法很简单

onLoad={() => {
getWeatherData(city);
}}
>

在我的主div。