reactjs要素（またはnull）を有効リアクトは

Question

を返却しなければならない、私は次の簡単なコードを持っている：

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')); 

を、私はこのエラーを得た：

ここ

"A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object."

Answer 1

、問題は、このラインであります。

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

あなたはあなたのコードは、プレーンなJavaScriptコードに変換されるので、次の行に開始括弧を入れている、それは次のようになります。

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

あなたはあなたのコードを解釈しながら、セミコロンはJavascriptによって挿入されていることを確認することができますので、何も値がレンダリング関数から返されていないし、このエラーを得ています。

このような状況を回避するには、returnステートメントの後に開始括弧を挿入する必要があります。これにより、一致する終了括弧が見つかるまで、Javascriptはセミコロンを挿入しません。あなたが生成されたコードを見れば、このように、

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

は今、それは、また、この

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

ようになります

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

に

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

を変更しますここでは、作業フィドルです。 JSFiddle

は、私はまた、あなたのUserコンポーネントにキーを渡すことによって、

Each child in an array or iterator should have a unique "key" prop.

を警告を修正しました。