Eu sunt obtinerea unor date de la un API care vine ca o serie de obiecte și vreau să le extrage și destructure ei, așa că am le pot folosi pentru a face o componentă în Reacționa. Am realizat ceva somewaht dar în acest fel nu sunt SĂRUT și, de asemenea, pentru a face aceasta este de a crea elementul de 6 ori pentru fiecare dintre ele, așa că am avea 24divs.
Date vine așa, "în fiecare oră" matrice cu 48 de obiecte. Am deja felie matrice pentru a utiliza numai șase ca tot ce am nevoie.
"hourly": [
{
"dt": 1618315200,
"temp": 282.58,
"feels_like": 280.4,
"pressure": 1019,
"humidity": 68,
"dew_point": 276.98,
"uvi": 1.4,
"clouds": 19,
"visibility": 306,
"wind_speed": 4.12,
"wind_deg": 296,
"wind_gust": 7.33,
"weather": [
{
"id": 801,
"main": "Clouds",
"description": "few clouds",
"icon": "02d"
}
],
"pop": 0
},
...
Aceasta este ceea ce am în interiorul meu se întoarcă și în secțiunea tag-uri care nu funcționează, dar nu cred că este cel mai bun mod de a face, de asemenea, e un coșmar să-l stil corect, deoarece creează șase elemente de fiecare dată:
<div className="weather-info-extra">
{shortedArr.map((i, index) => (
<div key={index}>
{new Date(i.dt * 1000).toLocaleTimeString([], {
timeZone: timezone,
hour: '2-digit',
minute: '2-digit',
hour12: true,
})}
</div>
))}
{shortedArr.map((i, index) => (
<div key={index}>{i.weather.map(w => w.description)}</div>
))}
{shortedArr.map((i, index) => (
<div key={index}>{i.temp} C</div>
))}
{shortedArr.map((i, index) => (
<div key={index}>
<p>Rain</p>
{i.pop}%
</div>
))}
</div>
Știu că e un mod foarte evident că îmi lipsește pentru a obține fiecare obiect din matrice, așa că am putea face mai bine.