无法显示从 API 获取的数据

Question

I'm new to react and I'm trying to practice what i learnt in my course. I'm doing a weatherapp provided with openweather api. I'm getting back response with all the data but when i'm trying to display them its not working. Can you give me any suggestions please ?

here is my code:

 import React, { useState, useEffect } from 'react'; import './App.css'; import Weather from './Weather'; const App = () => { const [weather, setWeather] = useState([]); useEffect(() => { getWeather(); }, []); let lat; let lon; const getWeather = () => { if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(position => { lon = position.coords.longitude; lat = position.coords.latitude; const APP_KEY = "e802333933a66ec7a7588d658785ad09"; const API = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&cnt=5&APPID=${APP_KEY}`; fetch(API) .then(response => { return response.json(); }) .then(data => { setWeather(data.list); console.log(setWeather); }) }); } } return ( <div className="App"> <div> {weather.map(w => ( <Weather temperature={w.list.main} weather={w.list.weather.description}/> ))} </div> </div> ); } export default App;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Without seeing the data that the API returns and knowing the shape of your state (can you post the console.log output in your question please), it looks like you need to do this:

<Weather temperature={w.main} weather={w.weather.description}/>

You already destructured the list property in the response when you set the state here:

.then(data => {
   setWeather(data.list);
   console.log(setWeather);
})

You can also put a console.log in your render function to see the shape of the state you are trying to render.

The error is being thrown, from what I can tell, in the render method when you are mapping through the state, right here:

<Weather temperature={w.list.main}

The element does not have a list property on it.

Pretty sure that in React you can debug things like this, like this:

{
  weather.map(w => {
    console.log(w)
    return <Weather temperature={w.list.main} weather={w.list.weather.description}/>
  })
}