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

问题在于，韦特达塔（Weatherdata
新代码

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;