import Info from "./components/Info";
import Search from "./components/Search";
import axios from "axios";
import { useEffect, useState } from "react";

const App = () => {

  const API_KEY = `<REDACTED>`
  const baseURL = `http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=`

  const [weatherData, setWeatherData] = useState({})
  const [search, setSearch] = useState('London')
  const [error, setError] = useState('')

  useEffect(() => {
    axios.get(`${baseURL + search}`)
      .then(resp => {
        setWeatherData(resp.data)
      })
      .catch(error => setError(error.message))
  }, [search])

  console.log(weatherData.location.name);

  return (
    <div className="App">
      <h1 style={{ textAlign: 'center', marginBottom: '2rem' }}>{error}</h1>
      <Search setSearch={setSearch} />
      <div className="container">
        <Info weatherData={weatherData} />
      </div>
    </div>
  );
}

export default App;

我正在尝试用 React 创建一个天气应用。我使用的是代码中可以看到的天气 API（也许您也应该看一下 API 结构）。 当我在控制台中记录 weatherData.location 时，我得到了正常的天气数据。但是当我尝试 weatherData.location.name 时，我得到了错误： Uncaught TypeError：无法读取未定义的属性（读取“name”） 。 我两周前才开始学习 React，所以我还是个初学者……谢谢。