reactjs - valide Réagir élément (ou null) doit être retourné

J'ai le code simple suivant :

var data = [{ email: "[email protected]" },{ email: "[email protected]" }];
var User = React.createClass({
render: function ()
{
    return
    (
        <li>
            {this.props.email}
        </li>
    );
}});

var UserList = React.createClass({        
render: function ()
{            
    var userNodes = this.props.data.map(function (user)
    {
        console.log(user.email);
        return
        (
            <User email={user.email} ></User>
        );
    });            
    return
    (
        <ul>{userNodes}</ul>
    );
}});


ReactDOM.render(<UserList data={data} />, document.getElementById('root'));

et j'ai eu cette erreur:

"Valide Réagir élément (ou null) doit être retourné. Vous pouvez avoir retourné indéfini, un tableau ou quelque autre objet non valide."

OriginalL'auteur BobyOneKenobi | 2017-01-27

  1. 18

    Ici, le problème est dans cette ligne.

    return
(
    <li>
        {this.props.email}
    </li>
);

    Vous avez mis le départ entre parenthèses sur la ligne suivante, de sorte que lorsque votre code est converti dans du code javascript, il ressemblera à quelque chose comme ça.

    render: function () {
    return; //A semicolon has been inserted.
    (React.createElement("li", null, this.props.email)); //unreachable code
}

    Vous pouvez voir que d'un point-virgule a été inséré par Javascript tandis que l'interprétation de votre code, si aucune valeur n'est renvoyée de la fonction rendu et vous obtenez cette erreur.

    Pour éviter cette situation, vous avez besoin de mettre de départ parenthèses à la suite de l'instruction de retour, de sorte que le Javascript ne insérez un point-virgule jusqu'à ce qu'une correspondance de fin parenthèses est trouvé. Comme ça,

    return (
     <li>
         {this.props.email}
     </li>
);

    Maintenant, si vous regardez le code généré, il ressemblera à quelque chose comme ceci

    render: function () {
    return (React.createElement("li", null, this.props.email));
}

    Également, de modifier 

    return
(
   <ul>{userNodes}</ul>
);

    à 

    return (
    <ul>{userNodes}</ul>
);

    Ici, est le travail de violon. JSFiddle

    J'ai aussi corrigé l'avertissement,

    Chaque enfant dans un tableau ou un itérateur doit avoir une "clé" prop.

    en passant clé dans votre User composant.

    merci il fonctionne très bien. Je ne savais pas pour les accolades, je n'aurais jamais trouvé 🙂

    OriginalL'auteur Hardik Modha