1
votes

Comment résoudre TypeError: Impossible de lire la propriété 'map' de undefined?

J'ai reçu cette erreur

TypeError: Impossible de lire la propriété 'map' d'undefined`

L'objet DISHES est importé de plats.js et chargé dans les plats d'objet d'état dans le composant App.js , puis il est passé comme accessoire à MenuComponent.js via le composant Menu lorsqu'il est rendu dans App.js^

Je ne sais pas pourquoi, tout semble correct, il s'agit d'un devoir qui fait partie d'un cours en ligne et j'ai vu des corrections apportées par d'autres personnes qui ont suivi le cours et elles semblent faire exactement la même chose que moi et cela fonctionne pour elles.

Sortie

App.js

XXX

MenuComponent.js

export const DISHES =
[
    {
    id: 0,
    name:'Uthappizza',
    image: 'assets/images/uthappizza.png',
    category: 'mains',
    label:'Hot',
    price:'4.99',
    description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
    comments: [
        {
        id: 0,
        rating: 5,
        comment: "Imagine all the eatables, living in conFusion!",
        author: "John Lemon",
        date: "2012-10-16T17:57:28.556094Z"
        },
        {
        id: 1,
        rating: 4,
        comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
        author: "Paul McVites",
        date: "2014-09-05T17:57:28.556094Z"
        },
        {
        id: 2,
        rating: 3,
        comment: "Eat it, just eat it!",
        author: "Michael Jaikishan",
        date: "2015-02-13T17:57:28.556094Z"
        },
        {
        id: 3,
        rating: 4,
        comment: "Ultimate, Reaching for the stars!",
        author: "Ringo Starry",
        date: "2013-12-02T17:57:28.556094Z"
        },
        {
        id: 4,
        rating: 2,
        comment: "It's your birthday, we're gonna party!",
        author: "25 Cent",
        date: "2011-12-02T17:57:28.556094Z"
        }
    ]                        },
    {
    id: 1,
    name:'Zucchipakoda',
    image: 'assets/images/zucchipakoda.png',
    category: 'appetizer',
    label:'',
    price:'1.99',
    description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
    comments: [
        {
        id: 0,
        rating: 5,
        comment: "Imagine all the eatables, living in conFusion!",
        author: "John Lemon",
        date: "2012-10-16T17:57:28.556094Z"
        },
        {
        id: 1,
        rating: 4,
        comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
        author: "Paul McVites",
        date: "2014-09-05T17:57:28.556094Z"
        },
        {
        id: 2,
        rating: 3,
        comment: "Eat it, just eat it!",
        author: "Michael Jaikishan",
        date: "2015-02-13T17:57:28.556094Z"
        },
        {
        id: 3,
        rating: 4,
        comment: "Ultimate, Reaching for the stars!",
        author: "Ringo Starry",
        date: "2013-12-02T17:57:28.556094Z"
        },
        {
        id: 4,
        rating: 2,
        comment: "It's your birthday, we're gonna party!",
        author: "25 Cent",
        date: "2011-12-02T17:57:28.556094Z"
        }
    ]
    },
    {
    id: 2,
    name:'Vadonut',
    image: 'assets/images/vadonut.png',
    category: 'appetizer',
    label:'New',
    price:'1.99',
    description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
    comments: [
        {
        id: 0,
        rating: 5,
        comment: "Imagine all the eatables, living in conFusion!",
        author: "John Lemon",
        date: "2012-10-16T17:57:28.556094Z"
        },
        {
        id: 1,
        rating: 4,
        comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
        author: "Paul McVites",
        date: "2014-09-05T17:57:28.556094Z"
        },
        {
        id: 2,
        rating: 3,
        comment: "Eat it, just eat it!",
        author: "Michael Jaikishan",
        date: "2015-02-13T17:57:28.556094Z"
        },
        {
        id: 3,
        rating: 4,
        comment: "Ultimate, Reaching for the stars!",
        author: "Ringo Starry",
        date: "2013-12-02T17:57:28.556094Z"
        },
        {
        id: 4,
        rating: 2,
        comment: "It's your birthday, we're gonna party!",
        author: "25 Cent",
        date: "2011-12-02T17:57:28.556094Z"
        }
    ]
    },
    {
    id: 3,
    name:'ElaiCheese Cake',
    image: 'assets/images/elaicheesecake.png',
    category: 'dessert',
    label:'',
    price:'2.99',
    description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
    comments: [
        {
        id: 0,
        rating: 5,
        comment: "Imagine all the eatables, living in conFusion!",
        author: "John Lemon",
        date: "2012-10-16T17:57:28.556094Z"
        },
        {
        id: 1,
        rating: 4,
        comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
        author: "Paul McVites",
        date: "2014-09-05T17:57:28.556094Z"
        },
        {
        id: 2,
        rating: 3,
        comment: "Eat it, just eat it!",
        author: "Michael Jaikishan",
        date: "2015-02-13T17:57:28.556094Z"
        },
        {
        id: 3,
        rating: 4,
        comment: "Ultimate, Reaching for the stars!",
        author: "Ringo Starry",
        date: "2013-12-02T17:57:28.556094Z"
        },
        {
        id: 4,
        rating: 2,
        comment: "It's your birthday, we're gonna party!",
        author: "25 Cent",
        date: "2011-12-02T17:57:28.556094Z"
        }
    ]
    }
];

plats.js

XXX

javascript reactjs react-props

10 commentaires

En vous assurant que this.props.dishes n'est pas indéfini, c'est-à-dire qu'il a une valeur qui est un tableau

Vous devez lier votre fonction

@DennisVash j'ai lié toutes les fonctions dans MenuComponent.js toujours rien

@Manish s'avère que l'objet DISHES n'est pas chargé dans l'état de plats dans App.js, y a-t-il quelque chose que je fais de mal?

Essayez de connecter DISHES et this.state.dishes pour commencer

Je les ai enregistrés, ils sont chargés avec les données de plats.js

Dans votre constructeur de menu, si vous faites console.log (this.props) après super (), qu'obtenez-vous?

@AnuragSrivastava j'obtiens this.props est chargé avec succès avec le contenu de state.dishes

Pouvez-vous essayer this.props && this.props.dishes.map ()

@AnuragSrivastava Cela a fonctionné, merci, pouvez-vous me dire quel est le && dans ce contexte, je suis assez nouveau dans reactjs, aussi ce serait cool si vous postez ceci comme une réponse afin que je puisse le marquer comme résolu

3 Réponses :

1
votes

Pour éviter toute valeur non définie des accessoires, vous pouvez utiliser la bibliothèque prop-types , où vous définissez les valeurs par défaut de vos accessoires, de sorte que si la valeur des accessoires n'est pas transférée vers votre composant, votre composant aura toujours une valeur par défaut pour se comporter comme prévu. C'est utile dans le cas où vos accessoires ne sont pas définis d'emblée par exemple (ce qui est probablement le cas ici).

Pour ce faire, installez la bibliothèque:

// Define the props types to check
Menu.propTypes = {
  dishes: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number,
    name: PropTypes.string,
    image: PropTypes.string,
    category: PropTypes.string,
    label: PropTypes.string,
    price: PropTypes.string,
    description: PropTypes.string,
    comment: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.number,
      rating: PropTypes.number,
      comment: PropTypes.string,
      author: PropTypes.string,
      date: PropTypes.string,
    })),
  })),
};

// Define here the default value to attribute to your dishes props
Menu.defaultProps = {
  dishes: [],
};

export default Menu;

Puis dans votre fichier MenuComponent , ajoutez l'import en haut de votre fichier:

import PropTypes from 'prop-types';

et enfin, à la fin de votre fichier, ajoutez cette vérification de type d'accessoires et la valeur par défaut:

npm install --save prop-types

J'espère que cela vous aidera!

2 commentaires

Merci pour le grand effort mais malheureusement cela n'a pas fonctionné: /

Bonjour, qu'est-ce que tu veux dire par ça n'a pas fonctionné? Qu'avez-vous essayé, quelles erreurs avez-vous eues?

3
votes

Vous avez ce composant

qui attend un accessoire plats .

Maintenant dans , vous appelez this.setState () mais il est asynchrone, et sur le premier rendu de (et donc de

 ), la valeur  this.state.dishes  est toujours  indéfinie , d'où  this.props < / code> dans   est également  non défini 

 Lorsqu'il est mis à jour, il y a un nouveau rendu, et les   et 
  sont rendus avec les valeurs correctes. 

 Vous pouvez donc ajouter une vérification pour  undefined  afin que  .map ()  ne s'exécute que lorsque  this.props  a une valeur. 
 / p>

 C'est ce que fait  this.props && this.props.dishes.map () . Essentiellement, cela signifie  if (this.props) {this.props.dishes.map ()} , donc quand  this.props  est  indéfini , la deuxième expression n'est pas exécutée. 

 Une fois que  setState  est terminé,  this.props  est défini et vous obtenez votre résultat.



                                                                    
                                    
                                    
                                        0 commentaires


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Je suis le même cours et j'ai copié et collé votre code sans problème. Assurez-vous que votre fichier index.js ressemble également à ceci. Si ce n'est pas le problème, vos importations ont peut-être été correctement installées. Puisqu'il y a un problème avec le MenuComponent, React n'a peut-être pas été téléchargé correctement. 
 Je ne sais pas quel est le problème, mais je ne pense pas que ce soit quelque chose avec le code. 
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

                                

                                                                    
                                    
                                    
                                        0 commentaires


            
                
		    
                    Articles qui pourrait vous intéresser :
                                            
                            Impossible d'importer le module "@ angular / material"                        
                        
                                            
                            Interaction profonde avec break and catch                        
                        
                                            
                            Utilisation de node.js comment renommer tous les fichiers d'un dossier                        
                        
                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO