IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Débuts en react


Sujet :

React

  1. #1
    Membre émérite

    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2013
    Messages
    1 058
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Conseil

    Informations forums :
    Inscription : Octobre 2013
    Messages : 1 058
    Points : 2 559
    Points
    2 559
    Par défaut Débuts en react
    Bonjour,

    Je débute avec react.
    Je travaille avec React et Spring, à terme j'appellerai des services rest.
    Pour l'instant dans mon app mes données sont dans du JSON en dur, et ça passe

    J'ai créé un composant, code ci-dessous, que j'appelle depuis mon "app.js".

    C'est un tableau , qui doit afficher les éléments qu'on lui donne par la propriété "journaux".
    Après je ferais des boutons pour modifier supprimer ...

    Je souhaite aussi stocker les valeurs transmises dans le state local.
    Mais c'est là que je bloque.
    Car le code ne le trouve pas et plante au moment de la boucle en ligne 29

    Si vous pouviez me dire où est mon erreur.

    Uncaught TypeError: t.map is not a function
    ****value
    TableJournaux.jsx:29
    Cordialement

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
     
    import React from 'react';
    //import { AppContext } from '../AppContext';
     
     
    export class TableJournaux extends React.Component {
      //static contextType = AppContext;
     
     
      constructor(props) {
        super(props)
     
           this.state =  {
             //journaux : []
          journaux : this.props
                 }      
        }
     
     
      render() {
        const { journaux } = this.state;
     
        return (
          <div>
            nombre d'éléments {journaux.length}<br></br>
     
            <table>
              <th>Code<th>Libellé</th></th>
              {
                journaux.map((journal) =>
                  <tr>
                    <td>{journal.code}</td>
                    <td>{journal.libelle}</td>
                  </tr>
                )}
            </table>
            <button onClick={() => {
              const newJournal = {
                code: 'new',
                libelle: 'Nouveau'
              }
     
              this.setState({
                journaux: [...this.state.journaux, newJournal]
              })
                    }}>Ajouter un journal</button>
          </div >
        );
      }
    }
    Consultez mes articles sur l'accessibilité numérique :

    Comment rendre son application SWING accessible aux non voyants
    Créer des applications web accessibles à tous

    YES WE CAN BLANCHE !!!

    Rappelez-vous que Google est le plus grand aveugle d'Internet...
    Plus c'est accessible pour nous, plus c'est accessible pour lui,
    et meilleur sera votre score de référencement !

  2. #2
    Membre émérite

    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2013
    Messages
    1 058
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Conseil

    Informations forums :
    Inscription : Octobre 2013
    Messages : 1 058
    Points : 2 559
    Points
    2 559
    Par défaut
    J'ai corrigé le premier problème, .
    J'avais oublié d'ajouter ".journaux" en ligne 29

    Maintenant quand j''actualise mon tableau pour ajouter un élément, il n'est pas reconnue ensuite en tant que tel.
    Dans "onClick" à la ligne 43 Dans le code

    Uncaught TypeError: Invalid attempt to spread non-iterable instance.
    In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    ****Babel 2
    ****onClick
    TableJournaux.jsx:43

    ****React 11
    ****unstable_runWithPriority
    scheduler.production.min.js:18

    ****React 3
    nonIterableSpread.js:2:8

    Passer en mode éditeur multiligne (Ctrl + B)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    import React from 'react';
    //import { AppContext } from '../AppContext';
     
     
    export class TableJournaux extends React.Component {
      //static contextType = AppContext;
     
     
      constructor(props) {
        super(props)
     
        this.state = {
          //journaux : []
          journaux: this.props
        }
      }
     
     
      render() {
        const { journaux } = this.state.journaux;
     
        return (
          <div>
            nombre d'éléments {journaux.length}<br></br>
     
            <table>
              <th>Code<th>Libellé</th></th>
              {
                journaux.map((journal) =>
                  <tr>
                    <td>{journal.code}</td>
                    <td>{journal.libelle}</td>
                  </tr>
                )}
            </table>
            <button onClick={() => {
              const newJournal = {
                code: 'new',
                libelle: 'Nouveau'
              }
     
              this.setState({
                journaux: [...this.state.journaux, newJournal]
              }
              )
            }}>Ajouter un journal</button>
          </div >
        );
      }
    }
    Consultez mes articles sur l'accessibilité numérique :

    Comment rendre son application SWING accessible aux non voyants
    Créer des applications web accessibles à tous

    YES WE CAN BLANCHE !!!

    Rappelez-vous que Google est le plus grand aveugle d'Internet...
    Plus c'est accessible pour nous, plus c'est accessible pour lui,
    et meilleur sera votre score de référencement !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. REACT au début de mon apprentissage ?
    Par haddocks dans le forum Général Conception Web
    Réponses: 5
    Dernier message: 11/02/2022, 21h42
  2. Débuts : classe / méthode main
    Par P@t dans le forum Eclipse Java
    Réponses: 5
    Dernier message: 10/07/2004, 04h45
  3. utilisation du mid pour tester le début d'un champ
    Par PrinceMaster77 dans le forum ASP
    Réponses: 4
    Dernier message: 09/07/2004, 14h10
  4. Début en OpenGL
    Par cyber_N dans le forum OpenGL
    Réponses: 3
    Dernier message: 30/06/2004, 09h12
  5. Toutes les bonnes choses ont un début ...
    Par Bols2000 dans le forum Algorithmes et structures de données
    Réponses: 4
    Dernier message: 22/08/2002, 18h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo