Question

我一直收到这个错误，我所做的每一件事似乎都很好谁能帮我吗？ `

    var React = require('react');
    var ListItem = require('./ListItem.jsx');

    var List = React.createClass({
      render : function () {
        var createItem = function(text, index){
          return <ListItem key={index + text} text= {text} />;
        };
        return (<ul>{this.props.items.map(createItem)}</ul>);
      }
    });
    module.exports = List ;

`


i even put () after return , nothing happend.

here is my other snippets :

    var React = require('react');
var ListItem = React.createClass({
  render : function() {
    return
    (
      <li>
        <h4>
          {this.props.text}
        </h4>
      </li>
    );
  }
});
module.exports = ListItem;

所以我得到的错误比你想象的要多。我想知道为什么因为我在这个反应中的新东西

Answer 1

问题出在这一行：

SomeName

它将被视为return ( ... )，并且不会return;任何事情。

最初return还可以是items或null，因此您需要在使用undefined之前对其进行检查：

map

使用此：

＆＃13;

return (<ul>{Array.isArray(this.props.items) ? this.props.items.map(createItem) : null}</ul>);

＆＃13;

var List = React.createClass({
   render : function () {
      var createItem = function(text, index){
         return <ListItem key={index + text} text= {text} />;
      };
      return (<ul>{Array.isArray(this.props.items) ? this.props.items.map(createItem) : null}</ul>);
    }
});

var ListItem = React.createClass({
  render : function() {
    return(
      <li>
        <h4>
          {this.props.text}
        </h4>
      </li>
    );
  }
});

ReactDOM.render(<List items={[1,2,3,4]}/>, document.getElementById('app'))

＆＃13;

Answer 2

第一次调用渲染时，this.props.items可能为空或未定义

因此你应该先测试一下。

var React = require('react');
var ListItem = require('./ListItem.jsx');

var List = React.createClass({
    mapItems: function() {
       if(this.props.items) {
         return this.props.items.map(function(text, index) {
            return <ListItem key={index + text} text= {text} />;
         })
       }
       //EDIT 1
       else {
           return <span>Empty list</span>;
       }
    },
    render : function () {
        return <ul>{ this.mapItems() }</ul>;
    }
});
module.exports = List ;

列表项：

var React = require('react');
var ListItem = React.createClass({
      render : function() {
        return <li>
                  <h4>
                    {this.props.text}
                  </h4>
               </li>
      }
});
module.exports = ListItem;

修改

在返回语句中，返回后的第一个字符应位于同一行。 Working JS fiddle

未捕获错误：必须返回有效的React元素（或null）

2 个答案: