Ako sa opakovať a výpis jednotlivých objektov z poľa objekty k tomu, v Reagovať

Question 1

Som stále nejaké dáta z API, že to príde ako pole objektov a chcete extrahovať ich a destructure ich tak môžem ich použiť na vykreslenie zložkou v Chuti. Som niečo dosiahli somewaht, ale tento spôsob nie som KISS a tiež k tomu, že je vytvorenie položka 6-krát za každý jeden z nich, tak som sa 24divs.

Údaje sa blíži, ako je tento, "hodinová" pole s 48 objekty. Už som plátok pole používať len šesť, ako že všetko, čo potrebujem.

"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, čo mám vo vnútri môjho návratu a v časti značky, ktoré funguje, ale nemyslím si, že je najlepší spôsob, ako to urobiť, tiež je to nočná mora na štýl je správne, ako to vytvára šesť položiek každý času:

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

Viem, že to veľmi zrejmý spôsob, že som chýbajúce dostať každý objekt z poľa, a tak som mohol, že je lepšie.

Question 2

Máte pravdu, že môžete robiť to efektívnejšie. Stačí len mapu raz. Môžete použiť fragment k obaliť viacerých prvkov, tento fragment je nikdy poskytnuté ale umožňuje mať viac detí.

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

Nie je potrebné, aby ste na mapu toto pole viackrát.

Len vedľajší poznámku, fragmenty, ktoré nepotrebujete kľúče môžu byť napísané aj prázdne značky v JSX:

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

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

Máte pravdu, že môžete robiť to efektívnejšie. Stačí len mapu raz. Môžete použiť fragment k obaliť viacerých prvkov, tento fragment je nikdy poskytnuté ale umožňuje mať viac detí.

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

Nie je potrebné, aby ste na mapu toto pole viackrát.

Len vedľajší poznámku, fragmenty, ktoré nepotrebujete kľúče môžu byť napísané aj prázdne značky v JSX:

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

Pekné odpoveď, ale to bude vyrábať chybu, v dôsledku č jedinečný "kľúč" prop. Zmeniť fragment k, zadané fragment, alebo zadané div a budete mať môj upvote
Holly svätých človek! Že bol spoooot na! Tak jednoduché, som vedel, že existuje lepší spôsob, ako a bol som zamieril na správny smer len pre život mi nemohol prísť na to posledná noc haha! Ďakujeme, že ste!!!

Ako sa opakovať a výpis jednotlivých objektov z poľa objekty k tomu, v Reagovať

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii