我在使用axios从一个简单的天气API中获得的响应时遇到了问题-具体来说，我在Map响应时遇到了问题。
.map()函数不起作用，因为我的响应是一个对象，我明白了。我的WeatherApi组件返回响应-一个对象。
然后，我想将WeatherApi组件导入到我的App组件中，然后访问其中的数据，如下所示：weather.location.name，或者提前将所有内容Map到变量（如在接口中），或者在呈现<h1>{weather.location.name}</h1>之类的HTML时动态地进行Map。
如果我这样做，我要么在应用程序中得到错误，有时天气是未定义的或构建/类型错误，.location不存在的类型WeatherData[]，它（检查下面）。
我怎样才能把所有的东西都整齐地Map到我的应用程序组件中呢？

气象参数

const WeatherApi = () => {
  const [weather, setWeather] = useState<WeatherData[] | null>([])
  
  useEffect(() => {
    const url:string = 'https://api.weatherapi.com/v1/current.json?key=d7db22f333fc4e6aaf3110311222601&q=London&aqi=no';

    axios
      .get<WeatherData[]>(url)
      .then(res => {
       setWeather(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  },[])

  return weather ? weather : null
}

export default WeatherApi

天气数据.ts

export interface WeatherData {
    location: Location
    current: Current
  }
  
  export interface Location {
    name: string
    country: string
    localtime_epoch: number
    localtime: string
  }
  
  export interface Current {
    temp_c: number
    is_day: number
    condition: Condition
    feelslike_c: number
  }
  
  export interface Condition {
    text: string
    icon: string
    code: number
  }

应用程序tsx

import WeatherApi from '../api/WeatherApi'

const Weather = () => {
    const weatherData = WeatherApi()

    // map weatherData here like in interface
    // const name = weatherData.location.name
    // const temp = weatherData.current.temp_c
    // etc.

  return (
    <div>
      // or add the data directly here as {weatherData.location.name} etc.
    </div>
  )
}

export default Weather