Как выполнить итерацию и извлечь отдельные объекты из массива объектов для визуализации в React

Question 1

Я получаю некоторые данные из API, которые поступают в виде массива объектов, и хочу извлечь их и деструктировать, чтобы я мог использовать их для визуализации компонента в React. Я кое-чего достиг, но таким образом я не целуюсь, а также для рендеринга создаю предмет 6 раз для каждого из них, так что у меня есть 24div.

Данные поступают следующим образом: "почасовой" массив из 48 объектов. Я уже срезал массив, чтобы использовать только шесть, так как это все, что мне нужно.

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

Это то, что я получил в своем возврате и в тегах разделов, что действительно работает, но я не думаю, что это лучший способ сделать это, кроме того, это кошмар, чтобы правильно оформить его, так как он каждый раз создает шесть элементов:

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

Я знаю, что есть очень очевидный способ, которого мне не хватает, чтобы получить каждый объект из массива, чтобы я мог сделать его лучше.

Question 2

Вы правы, что можете сделать это более эффективно. Вам нужно нанести карту только один раз. Вы можете использовать фрагмент для упаковки нескольких элементов, этот фрагмент никогда не отображается, но позволяет иметь несколько дочерних элементов.

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

Вам нет необходимости сопоставлять этот массив несколько раз.

Просто примечание, фрагменты, которые не нуждаются в ключах, могут быть записаны в JSX в виде пустых тегов:

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

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

Вы правы, что можете сделать это более эффективно. Вам нужно нанести карту только один раз. Вы можете использовать фрагмент для упаковки нескольких элементов, этот фрагмент никогда не отображается, но позволяет иметь несколько дочерних элементов.

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

Вам нет необходимости сопоставлять этот массив несколько раз.

Просто примечание, фрагменты, которые не нуждаются в ключах, могут быть записаны в JSX в виде пустых тегов:

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

Хороший ответ, но это приведет к ошибке из-за отсутствия уникальной "ключевой" опоры. Измените фрагмент на фрагмент с ключом или div с ключом, и вы получите мой голос
Святой Холли, чувак! Это было жутко! Так прямолинейно, я знал, что есть лучший путь, и я шел в правильном направлении, просто ради жизни я не мог понять этого прошлой ночью, ха-ха! Спасибо!!!

Как выполнить итерацию и извлечь отдельные объекты из массива объектов для визуализации в React

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории