0
votes

APP DE REACT-REDUX: Comment faire cela dans ce champ sur ma page, seule une partie des données affichées?

J'ai une API. Et je prends les données de cette API et l'affiche sur la page en tant que table de liste. Mais dans le champ temps , je veux que seulement une partie de l'information est affichée sur ma page.

Données affichées comme ceci:

 Entrez la description de l'image ici

Mais j'en ai besoin pour être comme ça (seulement des heures et des minutes):

 Entrez l'image Description ici < BR> Comment la mettre en œuvre dans mon cas? Juste s'il vous plaît sans liens, j'ai besoin d'aide spécifiquement dans ma situation.

Voici un composant qui affiche une liste de table (Tabletaha.js): Importation réagit de "réagir"; xxx

avions.js (réducteur): xxx

app.js (composant principal ): xxx


0 commentaires

3 Réponses :


0
votes

Il s'agit simplement d'une question de formatage de la valeur de la date avant le rendu, vous ne voulez pas modifier aucun de votre code de réduction, par exemple

{data.map(item => {
  const dt = new Date(item.actual);
  const mins = dt.getMinutes();
  return (
    <tr key={item.ID}>
      <td>{item.term}</td>
      <td>{item.gateNo}</td>
      <td>{`${dt.getHours()}:${mins < 10 ? '0' : ''}${mins}`}</td>
      <td>
        {item["airportToID.city_en"]
          ? item["airportToID.city_en"]
          : item["airportFromID.city_en"]}
      </td>
    <td>{item.airline.en.name}</td>
      <td>{item["planeTypeID.code"]}</td>
      <td>{item.status}</td>
    </tr>
  )
})}


8 commentaires

Merci beaucoup! Pouvez-vous m'aider à intégrer cela dans mon code? Je suis juste neuf pour la programmation ... Tout le code du projet dans Sandbox: CODESANDBOX.IO/s/...


@Tomasgidnop See Mise à jour , chèque Modifications apportées à Tabledata.js .


Merci encore! Vous n'avez changé que le fichier tabledata.js? Dans d'autres fichiers n'avez-vous pas modifié?


@Tomasgidnop Non, il vous suffit de changer Tabledata.js . Aussi, voir exemple mis à jour comme vous devez gérer des scénarios où les minutes sont <10


et ce que cela signifie minutes sont <10 ? c'est-à-dire qu'est-ce que c'est?


par ailleurs, un certain temps est pas très bien maintenant, je marqué en rouge i.piccy.info/i9/a1979f2d7c62083299cd2956390641b7/1573477625/ ...


@Tomasgidnop C'est exactement ce que mes adresses mon code, je n'ai pas mis à jour la codesandbox, veuillez donc vous reporter au code de ma réponse


Pouvez-vous jeter un coup d'oeil à ma nouvelle question? Stackoverflow.com/Questtions/58806769/...



2
votes

Vous pouvez faire quelque chose comme ceci: - xxx

puis vous pouvez les afficher dans votre composant.


8 commentaires

Merci beaucoup! Pouvez-vous m'aider à intégrer cela dans mon code? Je suis juste neuf pour la programmation ... Tout le code du projet dans Sandbox: CODESANDBOX.IO/s/...


@Tomasgidnop J'ai mis à jour votre lien Sandbox. Veuillez vérifier si vous pouvez voir les modifications.


Non, je ne vois pas le changement.Triez-le comme ceci: 1) Dans le coin droit dans Sandbox, appuyez sur le bouton "Fork", il copie mon projet mais avec une nouvelle adresse. 2) apporter des modifications 3) Ecrivez-moi l'adresse du bac à sable copié


Oups, voici le lien préféré - codesandbox. io / s / ...


Merci encore! Vous n'avez changé que le fichier tabledata.js? Dans d'autres fichiers n'avez-vous pas modifié?


@Tomasgidnop Nope, je n'ai changé que tabledata.js


Selon ma réponse, cela ne suffit pas. Vous devez également gérer les minutes <10 minutes sinon vous obtenez des horaires tels que 4: 5 plutôt que 4:05


@Shivratna Kumar Vous pouvez dire comment le faire? Je parle de: "minutes <10 minutes"



0
votes

Vous pouvez créer un Date Objet Utilisez ensuite des méthodes sur l'objet de date, comme:

0:50


2 commentaires

Seulement si vous êtes sur uc + 1 :)


@James ah oui bien sûr, mes excuses pour manquer cela dans ma réponse originale :)