React'te işlenecek nesneler dizisinden tek nesneler nasıl yinelenir ve ayıklanır

Question 1

Bir nesne dizisi olarak gelen bir apı'den bazı veriler alıyorum ve bunları React'te bir bileşen oluşturmak için kullanabilmem için bunları ayıklamak ve yok etmek istiyorum. Bir şekilde bir şey başardım ama bu şekilde KİSS değilim ve aynı zamanda her biri için 6 kez öğeyi oluşturuyorum, bu yüzden 24div'im var.

Veriler şu şekilde geliyor, 48 nesneli "saatlik" dizi. Zaten diziyi sadece altı tane kullanacak şekilde dilimliyorum, ihtiyacım olan tek şey bu.

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

Geri dönüşümde ve bölüm etiketlerinde işe yarayan şey budur, ancak bunu yapmanın en iyi yolu olduğunu düşünmüyorum, ayrıca her seferinde altı öğe oluşturduğu için düzgün bir şekilde stil vermek bir kabus:

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

Dizideki her nesneyi daha iyi hale getirebilmek için eksik olduğum çok açık bir yol olduğunu biliyorum.

Question 2

Bunu daha verimli yapabileceğin konusunda haklısın. Sadece bir kez haritalamanız gerekiyor. Birden çok öğeyi kaplamak için bir parça kullanabilirsiniz, bu parça hiçbir zaman işlenmez, ancak birden çok alt öğeye sahip olmanıza izin verir.

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

Bu diziyi birden çok kez eşlemenize gerek yok.

Sadece bir yan not, anahtarlara ihtiyaç duymayan parçalar jsx'te boş etiketler olarak yazılabilir:

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

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

Bunu daha verimli yapabileceğin konusunda haklısın. Sadece bir kez haritalamanız gerekiyor. Birden çok öğeyi kaplamak için bir parça kullanabilirsiniz, bu parça hiçbir zaman işlenmez, ancak birden çok alt öğeye sahip olmanıza izin verir.

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

Bu diziyi birden çok kez eşlemenize gerek yok.

Sadece bir yan not, anahtarlara ihtiyaç duymayan parçalar jsx'te boş etiketler olarak yazılabilir:

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

Güzel cevap, ancak bu, benzersiz bir" anahtar " pervane olmaması nedeniyle bir hata üretecektir. Parçayı anahtarlı bir parçaya veya anahtarlı div'e değiştirin ve notumu alırsınız
Kutsal azizler adamı! Spoooot açıktı! O kadar basit ki, daha iyi bir yol olduğunu biliyordum ve sadece hayatım için doğru yöne gidiyordum, dün gece bunu anlayamadım haha! Teşekkürler!!!

React'te işlenecek nesneler dizisinden tek nesneler nasıl yinelenir ve ayıklanır

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride