web-dev-qa-db-fra.com

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

J'obtiens cette erreur dans mon application ReactJS qui extrait les données des lieux. il me semble que l'erreur s'affiche lorsque map() pointe vers null

TypeError: impossible de lire la propriété 'map' de undefined

Je ne pouvais pas trouver un moyen de créer une valeur par défaut

et voici le code:

import React, {Component} from 'react';
// This component is for search list view, it render the props places data,
// And handle cilck for place item.
class SearchList extends Component {
    render() {
        // const {places, query, selectPlace} = this.props;
        const {places,query,selectPlace} = this.props;


        return (

        <div className="container">
                <hr/>
                <div className="input-group">
                    <input
                        type="text"
                        className="form-control"
                        placeholder="Filter"
                        aria-label="Filter Input"
                        onChange={(event) => {
                            query(event.target.value);
                        }}
                    />
                    <span className="input-group-addon">
              <i className="fas fa-filter"></i>
            </span>
                </div>
                <hr/>
                <div style={{maxHeight: '82vh', overflow: 'scroll'}}>
                    <ul className="list-group">
                        {
                            places.map(place => (
                            <li
                                tabIndex="0"
                                key={place.id}
                                className="list-group-item list-group-item-action"
                                onClick={() => selectPlace(place)}>
                                <span>{place.name}</span>
                            </li>
                        ))
                        }
                    </ul>
                </div>
            </div>
        );
    }
}

export default SearchList;
javascriptreactjsfrontend
6
Nuha

On peut utiliser le rendu conditionnel pour rendre vos lieux. Par conséquent, si places n'est pas défini, l'opérande droit de l'opérateur and (&&) ne sera pas rendu

                 <ul className="list-group">
                    {
                       places && places.map(place => (
                        <li
                            tabIndex="0"
                            key={place.id}
                            className="list-group-item list-group-item-action"
                            onClick={() => selectPlace(place)}>
                            <span>{place.name}</span>
                        </li>
                    ))
                    }
                </ul>
2
edkeveked

Cela se produit lors du premier rendu, car votre places provient très probablement d'une promesse résolue quelque part qui rend cet accessoire undefined. Il existe un moyen de résoudre ce problème, defaultProps .

SearchList.defaultProps = {
    places: [],

}

Cependant, si vous passez places, comme <SearchList places={this.state.places} />, Vous devez être sûr que this.state.places N'est pas défini et pas null car une valeur nulle est valide et remplacera votre defaultProps. Si vous voulez vous prémunir contre cela, vous devez faire le rendu conditionnel.

places && places.map().

2
Henrik Andersson