reactjs – 必须返回有效的React元素(或null)

发布时间：2020-12-15 20:18:26 所属栏目：百科来源：网络整理

导读：我有以下简单的代码： 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 (){ va

我有以下简单的代码：

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.”

解决方法

在这里,问题出在这一行.

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",this.props.email));
}

另外,改变

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

至

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

在这里,是工作小提琴. JSFiddle

我也修好了警告,

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!