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

在这里，问题出在这一行。

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

您将起始括号放在了下一行，因此当您的代码转换为纯Javascript代码时，它将看起来像这样。

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

您可以看到在解释代码时Javascript已插入分号，因此render函数没有返回任何值，并且您遇到此错误。

为避免这种情况，您需要在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