Como iterar e extrair objetos individuais a partir de uma matriz de objetos para compor em Reagir

Question 1

Estou recebendo alguns dados a partir de uma API que está vindo como uma matriz de objetos e deseja extrair-los e destructure-los para que eu possa usá-los para compor um componente de Reagir. Eu ter conseguido algo somewaht, mas desta forma eu não estou BEIJO e também para compor é criar o item 6 vezes para cada um deles, então eu tenho 24divs.

De dados está vindo como esta, "por hora" matriz com 48 objetos. Eu já fatia da matriz para utilizar apenas seis como que tudo o que eu preciso.

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

É isso que eu tenho dentro da minha volta e dentro de tags seção que não funciona, mas eu não acho que é a melhor maneira de fazê-lo, também é um pesadelo para o estilo apropriado, dado que cria seis itens cada vez:

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

Eu sei que há uma forma muito óbvia que estou em falta para cada objeto a partir da matriz para que eu pudesse torná-lo melhor.

Question 2

Você está certo de que você pode fazer isso de forma mais eficiente. Você só precisa do mapa uma vez. Você pode usar um fragmento para envolver os vários elementos, este fragmento é nunca renderizados, mas permite que você tenha vários filhos.

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

Não há necessidade de que você mapeie esta matriz várias vezes.

Apenas uma nota de lado, fragmentos que não precisa de chaves pode ser escrito como tags vazias em JSX:

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

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

Você está certo de que você pode fazer isso de forma mais eficiente. Você só precisa do mapa uma vez. Você pode usar um fragmento para envolver os vários elementos, este fragmento é nunca renderizados, mas permite que você tenha vários filhos.

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

Não há necessidade de que você mapeie esta matriz várias vezes.

Apenas uma nota de lado, fragmentos que não precisa de chaves pode ser escrito como tags vazias em JSX:

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

Bela resposta, mas isso irá produzir um erro devido a não exclusivo "chave" prop. Alterar o fragmento de um fragmento introduzido ou digitada div e você vai chegar a minha vote positivamente
Holly santos, homem! Que foi spoooot em! Tão simples, eu sabia que havia uma maneira melhor e eu estava indo na direção certa apenas para a vida de mim não conseguia descobrir última noite haha! Obrigado!!!

Como iterar e extrair objetos individuais a partir de uma matriz de objetos para compor em Reagir

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria