Come iterare e estrarre i singoli oggetti da un array di oggetti di rendere a Reagire

Question 1

Sto diventando un po ' di dati da un'API che si è venuta come un array di oggetti e desidera estrarre e destructure di loro, in modo che posso usare per il rendering di un componente nel Reagire. Ho realizzato qualcosa di somewaht ma in questo modo non sto BACIO e anche per il rendering è la creazione dell'elemento 6 volte per ciascuno di loro, così ho 24divs.

I dati provenienti come questo, "oraria" array con 48 oggetti. Ho già fetta matrice di utilizzare solo sei come tutto quello che mi serve.

"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
},
...

Questo è quello che ho ottenuto all'interno del mio ritorno e all'interno di tag di sezione che funziona, ma non credo sia il modo migliore per farlo, inoltre è un incubo per lo stile correttamente come si crea sei elementi ogni volta:

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

So che c'è un modo ovvio che mi manca per ottenere ogni oggetto dalla matrice così ho potuto renderla migliore.

Question 2

Hai ragione che si può fare questo in modo più efficiente. Hai solo bisogno di una mappa di una volta. È possibile utilizzare un frammento di racchiudere più elementi, questo frammento è mai reso, ma permette di avere più figli.

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

Non c'è bisogno di mappare la matrice più volte.

Solo una nota a margine, frammenti che non hanno bisogno di chiavi può essere scritto come i tag vuoti, in JSX:

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

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

Hai ragione che si può fare questo in modo più efficiente. Hai solo bisogno di una mappa di una volta. È possibile utilizzare un frammento di racchiudere più elementi, questo frammento è mai reso, ma permette di avere più figli.

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

Non c'è bisogno di mappare la matrice più volte.

Solo una nota a margine, frammenti che non hanno bisogno di chiavi può essere scritto come i tag vuoti, in JSX:

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

Bella risposta, ma questo produrrà un errore dovuto alla non unica "chiave" prop. Modificare il frammento di chiave frammento o digitato div e otterrete la mia upvote
Holly santi uomo! Che era spoooot su! In modo semplice, sapevo che c'era un modo migliore e andavo verso la direzione giusta solo per la vita di me non riusciva a capire la scorsa notte haha! Grazie!!!

Come iterare e estrarre i singoli oggetti da un array di oggetti di rendere a Reagire

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria