Question

我刚开始学习ReactJS并且第一次运行我的应用时出现以下错误：

main.js：820 Uncaught Invariant Violation： ReactCompositeComponent.render（）：一个有效的React元素（或null）必须被退回您可能已经返回undefined，数组或其他一些无效的对象。

我已经在Github上托管了我的项目，因为main.js文件太大而无法在此添加，所以这就是为什么这里是指向main.js的链接：

https://github.com/nicefellow1234/react-skeleton/blob/master/public/js/main.js

当我将此行修改为：

时，错误开始了

ReactDOM.render(React.createElement(List,null), document.getElementById('ingredients'));

我的这个问题与这个问题有关：

Can anyone let me know why am I getting this error?

Answer 1

您总是在渲染方法中返回String而不是Element。

你有

var List = React.createClass({
    render: function() {
        var listItems = ingredients.map(function(item) {
            return "<Listitem key={item.id} ingredient={item.text} />"; // This is wrong
        });
        return "<ul>{listItems}</ul>"; // This is wrong
    }

});


var ListItem = React.createClass({
     render: function() {
         return ("<li><h4>{this.props.ingredient}</h4></li>"); // This is wrong
     }

});

它应该是

var List = React.createClass({
    render: function() {
        var listItems = ingredients.map(function(item) {
            return <ListItem key={item.id} ingredient={item.text} />;
        });
        return <ul>{listItems}</ul>;
    }

});


var ListItem = React.createClass({
    render: function() {
          return (<li><h4>{this.props.ingredient}</h4></li>);
     }

});

jsfiddle example

PD：下次您应该在问题中添加组件而不是捆绑文件，这将更容易为您提供帮助。

Answer 2

我没有阅读整个js文件，因为它非常大，但是当您在渲染方法中返回时会出现此错误。确保在每个渲染方法中使用 return 语句。

获取未捕获的不变违规：ReactCompositeComponent.render（）：错误？

2 个答案: