Fetch返回一个带有模板字符串的空数组

Question

城市的useState值(默认为伦敦)与getWeather函数中调用的获取值URL不匹配。当我不小心重新渲染代码时，它有时会运行，但不会在其他时候运行

import './App.css';
import Daily from './components/daily';
import {useState, useEffect} from 'react'
function App() {
const [city, setCity] = useState('London')
const [weatherData, setWeather] = useState([])
const getWeather = async() =>{
try{
const resp = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=f8d957da06af592a1390c360ea801908&units=metric`)
const pResp = await resp.json()
setWeather(pResp)
}
catch{
console.log('error')
}
}
useEffect(()=>{
getWeather()
},[])
return(
<>
<Daily {...weatherData}></Daily>
</>
)
}
export default App;
code here

Answer 1

问题是，天气数据正在通过之前，它获取和格式化正确，修复我只是添加了一个加载屏幕和渲染延迟，所以数据总是在那里新代码

import './cssdirect/App.css';
import Daily from './components/daily';
import {useState, useEffect} from 'react'
import Loading from './Loading';
function App() {
const [loading, setLoading] = useState(true)
const [city, setCity] = useState('paris')
const [weatherData, setWeather] = useState([])
const getWeather = async() =>{
setLoading(true)
try{
const resp = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=f8d957da06af592a1390c360ea801908&units=imperial`)
const pResp = await resp.json()
setWeather(pResp)
setLoading(false)
}
catch{
console.log('error')
}
}

useEffect(()=>{
getWeather()
},[])
if(loading==true){
return <Loading/>

}
else{
return <Daily {...weatherData}/>

}
}
export default App;