web-dev-qa-db-fra.com

TypeError non capturé: this.state.data.map n'est pas une fonction

Je suis nouveau dans React, j'ai vu certains des problèmes similaires, mais je n'ai pas trouvé pourquoi cela se produit. Je reçois une "TypeError Uncaught: this.state.data.map n'est pas une fonction". Voici le code. S'il vous plaît, aidez à trouver quel est le problème.

class Audienses extends React.Component {

    constructor (props)
    {
        super(props);

        this.state = {
            data: ''
        };

        this.loadFromServer = this.loadFromServer.bind(this);
        this.childeDelete = this.childeDelete.bind(this);
        this.childeEdit = this.childeEdit.bind(this);

    }

    loadFromServer () {
        var xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = function() {
            var data = JSON.parse(xhr.responseText);
            this.setState({ data: data });

        }.bind(this);
        xhr.send();
    }

    componentDidMount() {
        this.loadFromServer();   
    }


     render () {

         var audienses = this.state.data.map((value, index) => (
           <OneElement key={value.id} audience={value.audience} description={value.description} />
        ));

        /* or like this
         var audienses = this.state.data.map(function(s) {
             <OneElement key={s.id} audience={s.audience} description={s.description} onDeleteClick={this.childeDelete} oneEditClick={this.childeEdit} />
         }).bind(this);
        */
         return
        <div>
            <h1>Audiences</h1>
            <table id="services">
                <tr>
                    <th>Audience</th>
                    <th>Description</th>
                    <th></th>
                    <th></th>
                </tr>
                <tbody>
                   {audienses}
                </tbody>
            </table>
        </div>;
    }
}
javascriptreactjsreact-jsx
14
Ang

Votre état data initial est String., String n'a pas de méthode .map, vous devez modifier votre état initial de '' à []

this.state = {  data: [] };
33
Alexander T.

.map n'est pas applicable à un objet String. Envisagez de remplacer les "données" par un tableau. .map est une méthode qui appelle une fonction sur chaque élément d'un tablea.

6
Jan Franz Palngipang

J'ai la même erreur dans react-redux.

le problème était lorsque j'ajoute un nouveau produit dans la page d'ajout/produit et que je clique sur le bouton de retour, le composant de la page d'accueil affiche cette erreur

home_container.js: 8 TypeError non capturé: products.product.map n'est pas une fonction

renderItems = (products) => (
            products.product ? 
            products.product.map(item => (
                <ProductItem {...item} key = { item._id } />
            ))
            : null
        )

solution

Je passe {} au lieu de [] du serveur de noeud

Donc, lorsque vous avez ce type d'erreur dans react-redux, vérifiez d'abord ce que vous passez du serveur dans ce champ et vérifiez également les réducteurs de ce composant particulier.

0
Prakash Karena