Tengo el siguiente código simple:
var data = [{ email: "bob@gmail.com" },{ email: "toto@gmail.com" }]; 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'));y obtuve este error:
"Se debe devolver un elemento React válido (o nulo). Es posible que haya devuelto un objeto indefinido, una matriz o algún otro objeto no válido".
Aquí, el problema está en esta línea.
return ( <li> {this.props.email} </li> );Ha puesto los paréntesis iniciales en la siguiente línea, de modo que cuando su código se convierta en código javascript sin formato, se verá así.
render: function () { return; // A semicolon has been inserted. (React.createElement("li", null, this.props.email)); // unreachable code }Puede ver que Javascript ha insertado un punto y coma al interpretar su código, por lo que no se devuelve ningún valor de la función de procesamiento y está recibiendo este error.
Para evitar esta situación, debe colocar los paréntesis iniciales después de la declaración de retorno, de modo que Javascript no inserte un punto y coma hasta que se encuentre un paréntesis final coincidente. Me gusta esto,
return ( <li> {this.props.email} </li> );Ahora, si miras el código generado, se verá así
render: function () { return (React.createElement("li", null, this.props.email)); }También, cambia
return ( <ul>{userNodes}</ul> );para
return ( <ul>{userNodes}</ul> );Aquí, está el violín de trabajo. JSFiddle
También he arreglado la advertencia,
Cada elemento secundario en una matriz o iterador debe tener un accesorio de "clave" único.
pasando clave en su componente de User .