Cómo recorrer y el extracto de objetos individuales de una matriz de objetos para representar en Reaccionar

Question 1

Me estoy poniendo algunos datos de una API que viene como una serie de objetos y se desea extraer de ellos y desestructurados ellos, así que puede utilizar para representar un componente en Reaccionar. He conseguido algo somewaht pero de esta manera no estoy BESO y también para hacer es crear el artículo 6 veces para cada uno de ellos, así que tengo 24divs.

Datos como este, "cada hora" matriz con 48 objetos. Yo ya rebanada de la matriz a utilizar sólo seis como que todo lo que necesito.

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

Esto es lo que tengo dentro de mi regreso y dentro de la sección de etiquetas que se hace el trabajo, pero no creo que es la mejor manera de hacerlo, también es una pesadilla estilo adecuadamente como crea seis elementos 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>

Sé que hay un evidente camino que me falta para llegar a cada objeto de la matriz por lo que yo podría hacer mejor.

Question 2

Tienes razón que usted puede hacer esto de manera más eficiente. Sólo necesitas mapa de una vez. Usted puede utilizar un fragmento para revestir las múltiples elementos, este fragmento es que nunca se habían prestado, pero permite tener varios hijos.

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

No hay necesidad para que usted mapa esta matriz varias veces.

Sólo una nota al margen, fragmentos que no necesitan llaves puede ser escrito como etiquetas vacías en JSX:

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

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

Tienes razón que usted puede hacer esto de manera más eficiente. Sólo necesitas mapa de una vez. Usted puede utilizar un fragmento para revestir las múltiples elementos, este fragmento es que nunca se habían prestado, pero permite tener varios hijos.

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

No hay necesidad para que usted mapa esta matriz varias veces.

Sólo una nota al margen, fragmentos que no necesitan llaves puede ser escrito como etiquetas vacías en JSX:

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

Bonita respuesta, pero esto va a producir un error debido a que no hay una única "clave" de la proposición. Cambiar el fragmento de un fragmento de llave o llave div y obtendrás mi upvote
Holly santos, hombre! Que fue spoooot en! Tan sencillo, yo sabía que había una mejor manera y que yo iba en la dirección correcta sólo para la vida de mí no podía averiguar anoche jaja! Gracias!!!

Cómo recorrer y el extracto de objetos individuales de una matriz de objetos para representar en Reaccionar

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría