必须返回有效的React元素（或null）

Question

我有以下简单的代码：

var data = [{ email: "[e-mail]" },{ email: "[e-mail]" }];
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'));

我得到了这个错误：

"必须返回有效的React元素（或null）。您可能已返回未定义、数组或其他无效对象。"

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在解释代码时插入了分号，因此渲染函数不会返回任何值，因此会出现此错误。

为了避免这种情况，您需要将起始括号放在返回语句之后，这样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>
);

这里是工作小提琴。JSFIDLE

我还修正了警告，

数组或迭代器中的每个子级都应该有一个唯一的“键”属性。

通过在用户组件中传递密钥。