Cum de a repeta și de a extrage obiecte unice dintr-o serie de obiecte pentru a face în Reacționa

Question 1

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.

Question 2

Ai dreptate că puteți face acest lucru mai eficient. Ai nevoie doar pentru a mapa o dată. Puteți utiliza un fragment de la incadrati mai multe elemente, acest fragment nu este randat, dar vă permite să aveți mai multe copii.

shortArray.map((data, index) => (
    <React.Fragment key={index}>
        <div>{data.time}</div>
        <div>{data.weather}</div>
        // anything else you want rendered
    <React.Fragment />
));

Nu este nevoie pentru tine de a hartă această matrice de mai multe ori.

Doar o notă parte, fragmente care nu au nevoie de chei poate fi scris la fel de gol tag-uri în JSX:

<> /** React fragment code here */ </>

David Barker · Answer 1 · 2021-11-24T09:15:08

Ai dreptate că puteți face acest lucru mai eficient. Ai nevoie doar pentru a mapa o dată. Puteți utiliza un fragment de la incadrati mai multe elemente, acest fragment nu este randat, dar vă permite să aveți mai multe copii.

shortArray.map((data, index) => (
    <React.Fragment key={index}>
        <div>{data.time}</div>
        <div>{data.weather}</div>
        // anything else you want rendered
    <React.Fragment />
));

Nu este nevoie pentru tine de a hartă această matrice de mai multe ori.

Doar o notă parte, fragmente care nu au nevoie de chei poate fi scris la fel de gol tag-uri în JSX:

<> /** React fragment code here */ </>

Frumos raspuns, dar acest lucru se va produce o eroare din cauza la nr unic "cheie" prop. Schimba fragment de la un codat fragment sau tastat div si o sa-ti dau upvote
Holly sfinții om! Asta a fost spoooot pe! Atât de simplă, știam că există o modalitate mai bună și am fost condus în direcția cea bună doar pentru viața de mine nu a putut da seama noaptea trecută haha! Multumesc!!!!!

Cum de a repeta și de a extrage obiecte unice dintr-o serie de obiecte pentru a face în Reacționa

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie