Jak wykonać iteracji i wyodrębnić poszczególne obiekty z tablicy obiektów do wizualizacji w React

Question 1

Mam pewne dane z API, które dostają się w postaci tablicy obiektów, i chcę wyjąć je i деструктировать, żebym mógł je wykorzystać do wizualizacji składnika w React. Ja coś osiągnął, ale w ten sposób nie pocałuję, a także do renderowania tworzę przedmiot 6 razy dla każdego z nich, tak, że mam 24div.

Dane pochodzą w następujący sposób: "godzinowych" tablica z 48 obiektów. Ja już odciął tablicy, aby używać tylko sześć, tak jak to jest wszystko, czego mi trzeba.

"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, że mam w swoim powrocie i w tagach partycji, co naprawdę działa, ale nie sądzę, że jest to najlepszy sposób, aby to zrobić, poza tym, jest to koszmar, aby poprawnie których możecie następnie zmienić go, tak jak on za każdym razem tworzy sześć elementów:

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

Wiem, że jest bardzo oczywisty sposób, którego mi brakuje, aby każdy element z tablicy, żebym mógł zrobić to lepiej.

Question 2

Masz rację, że można to zrobić bardziej efektywnie. Trzeba nałożyć mapę tylko jeden raz. Można użyć fragment do pakowania wielu elementów, ten fragment nigdy nie jest wyświetlany, ale pozwala mieć kilka elementów podrzędnych.

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

Nie trzeba porównać ten masyw kilka razy.

Tylko uwaga, fragmenty, które nie potrzebują kluczy, mogą być rejestrowane w JSX w postaci pustych znaczników:

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

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

Masz rację, że można to zrobić bardziej efektywnie. Trzeba nałożyć mapę tylko jeden raz. Można użyć fragment do pakowania wielu elementów, ten fragment nigdy nie jest wyświetlany, ale pozwala mieć kilka elementów podrzędnych.

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

Nie trzeba porównać ten masyw kilka razy.

Tylko uwaga, fragmenty, które nie potrzebują kluczy, mogą być rejestrowane w JSX w postaci pustych znaczników:

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

Dobra odpowiedź, ale to doprowadzi do błędu z powodu braku unikalny "klucz" podpory. Zmień fragment na fragment z kluczem lub div z kluczem i masz mój głos
Święty Holly, stary! To było straszne! Tak szczere, wiedziałem, że istnieje lepszy sposób, i szedłem w dobrym kierunku, po prostu dla życia nie mogłem zrozumieć tej ostatniej nocy, haha! Dziękuję!!!

Jak wykonać iteracji i wyodrębnić poszczególne obiekty z tablicy obiektów do wizualizacji w React

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii