TypeError: weatherData.map不是一个函数

Question

我试图从API映射数据，但是在编写显示数据的代码时，我得到了以下错误：TypeError: weatherData.map is not a function

我尝试从代码中删除useEffect，并尝试添加花括号：const [weatherData, setWeatherData] = useState([{}])

更新：第14行日志未定义：console.log(weatherData.response)

import axios from 'axios'
import { useEffect, useState } from 'react'
import './App.css'

function App() {
  const [search, setSearch] = useState("london")
  const [weatherData, setWeatherData] = useState([])



  const getWeatherData = async () => {
    try {
      const weatherData = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${search}&appid={APIKEY}`);
      console.log(weatherData.response);
      if (weatherData) {
        setWeatherData(weatherData);
      }
    } catch (err) {
      console.error(err);
    }
  }

  useEffect(() => {
    getWeatherData()
  }, [getWeatherData])

  const handleChange = (e) => {
    setSearch(e.target.value)
  }


  return (
    <div className="App">
      <div className='inputContainer'>
        <input className='searchInput' type="text" onChange={handleChange} />
      </div>
      {weatherData.map((weather) => {
        return (
          <div>
            <h1>{weather.name}, {weather.country}</h1>
          </div>
        )
      })}
    </div>
  )
}

export default App

Answer 1

在获取数据和呈现数据时出现了错误。

只是更改整个应用程序组件，如下所示:

import { useEffect, useState } from "react";
import axios from "axios";
function App() {
  const [search, setSearch] = useState("London");
  const [weatherData, setWeatherData] = useState([]);
  const APIKEY = "pass your api key here";

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `https://api.openweathermap.org/data/2.5/weather?q=${search}&appid=${APIKEY}`
      );

      setWeatherData(result.data);
    };

    fetchData();
  }, [search]);

  const handleChange = (e) => {
    setSearch(e.target.value);
  };

  return (
    <div className="App">
      <div className="inputContainer">
        <input className="searchInput" type="text" onChange={handleChange} />
      </div>
      <h1>
        {" "}
        {weatherData.name} ,{" "}
        {weatherData.sys ? <span>{weatherData.sys.country}</span> : ""}{" "}
      </h1>
    </div>
  );
}

export default App;

这应该很好，只需确保更改：const APIKEY = "pass your api key ";到const APIKEY = "<your API key> ";

这是 码箱的演示

Answer 2

创建一个承诺函数：

const getWeatherData = async () => {
  try {
    
    const weatherData = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${search}&appid={APIKEY}`);
    console.log(weatherData.response);

    if (weatherData.response.data) { 
        setWeatherData(weatherData.response.data);
    }
  } catch (err) {
    console.error(err);
  }
}

那就叫吧。