Jak iterovat a extrahovat jednotlivé objekty z pole objektů k vykreslení v Reagovat

Question 1

Dostávám data z API, které vrací jako pole objektů a chcete extrahovat a destructure nich, takže můžu použít k tomu, aby složka v Reagovat. Dosáhl jsem něco somewaht ale takhle nebudu LÍBAT a také k tomu, že je vytváření položky 6 krát pro každý jeden z nich, takže jsem 24divs.

Data přichází jako je tento, "hodinové" pole s 48 objektů. Už jsem kousek pole použít pouze šest jako, že vše, co potřebuji.

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

To je to, co mám uvnitř mého návratu a v sekci značky, které funguje, ale nemyslím si, že je to nejlepší způsob, jak to udělat, také je to noční můra stylu správně, protože to vytváří šest položek se pokaždé, když:

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

Vím, že je to velmi zřejmý způsob, který mi chybí, aby si každý objekt z pole, takže jsem mohl vyjádřit to lepší.

Question 2

Máš pravdu, že můžete to udělat efektivněji. Stačí pouze mapu jednou. Můžete použít fragment obsahovat více prvků, tento fragment je nikdy vykreslen, ale vám umožní mít více dětí.

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

Není třeba pro mapování tohoto pole vícekrát.

Jen poznámka, fragmenty, které nepotřebujete klíče lze zapsat jako prázdné tagy v JSX:

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

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

Máš pravdu, že můžete to udělat efektivněji. Stačí pouze mapu jednou. Můžete použít fragment obsahovat více prvků, tento fragment je nikdy vykreslen, ale vám umožní mít více dětí.

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

Není třeba pro mapování tohoto pole vícekrát.

Jen poznámka, fragmenty, které nepotřebujete klíče lze zapsat jako prázdné tagy v JSX:

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

Pěkná odpověď, ale to bude produkovat chyby v důsledku žádné unikátní "klíč" prop. Změnit fragment na zadané fragment nebo s klíčem div a budete mít můj upvote
Holly svatí muži! To bylo spoooot! Tak jednoduché, věděl jsem, že tam byl lepší způsob, a já mířil na správný směr, jen pro život mě, nemohl přijít na to poslední noc, haha! Děkuji!!!

Jak iterovat a extrahovat jednotlivé objekty z pole objektů k vykreslení v Reagovat

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii