Comment itérer et d'en extraire des objets uniques à partir d'un tableau d'objets pour les rendre à Réagir

Question 1

Je suis l'obtention de certaines données à partir d'une API qui arrive comme un ensemble d'objets et que vous voulez extraire et se déstructurent à eux donc je peux les utiliser pour rendre un composant de Réagir. J'ai réalisé quelque chose somewaht mais de cette façon, je ne suis pas BAISER et aussi pour le rendu c'est la création de l'article 6 fois pour chacun d'eux, j'ai donc 24divs.

Les données sont à venir comme cela, "horaire" tableau avec 48 objets. J'ai déjà tranche du tableau à utiliser seulement six, ainsi que tout ce que je dois.

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

C'est ce que j'ai obtenu à l'intérieur de mon retour et au sein de la section des balises qui ne fonctionne pas mais je ne pense pas que la meilleure façon de le faire, c'est aussi un cauchemar pour le style correctement car elle crée des six éléments à chaque fois:

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

Je sais, il y a un moyen évident que je suis absent pour obtenir chaque objet à partir de la matrice afin que je puisse la rendre meilleure.

Question 2

Vous avez raison, vous pouvez le faire plus efficacement. Vous avez seulement besoin de la carte une fois. Vous pouvez utiliser un fragment d'envelopper les multiples éléments, ce fragment n'est jamais affiché, mais vous permet d'avoir plusieurs enfants.

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

Il n'y a aucune nécessité pour vous de carte ce tableau plusieurs fois.

Juste une note de côté, des fragments qui n'ont pas besoin de touches peuvent être écrites comme des balises vides dans JSX:

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

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

Vous avez raison, vous pouvez le faire plus efficacement. Vous avez seulement besoin de la carte une fois. Vous pouvez utiliser un fragment d'envelopper les multiples éléments, ce fragment n'est jamais affiché, mais vous permet d'avoir plusieurs enfants.

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

Il n'y a aucune nécessité pour vous de carte ce tableau plusieurs fois.

Juste une note de côté, des fragments qui n'ont pas besoin de touches peuvent être écrites comme des balises vides dans JSX:

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

Belle réponse, mais cela produira une erreur due à la non unique "clé" prop. Modifier le fragment d'un détrompeur fragment ou saisies div et vous aurez mon upvote
Holly saints de l'homme! C'était spoooot sur! Tellement simple, je savais qu'il y avait une meilleure façon et j'ai été dirigé sur la bonne direction seulement pour la vie de moi ne pouvais pas comprendre la nuit dernière haha! Merci!!!!!!

Comment itérer et d'en extraire des objets uniques à partir d'un tableau d'objets pour les rendre à Réagir

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie