Question

TypeError：weatherData.map 不是一个函数

2022-08-26

149

reactjs fetch

我尝试从 API 映射数据，但在编写代码以显示数据时出现此错误： TypeError：weatherData.map 不是函数

我尝试从代码中删除 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

您在获取数据以及呈现数据时遇到错误。

只需像这样更改整个 App 组件：

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>”;

这是 codesandbox

中的演示

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);
  }
}

然后调用它。