Question

我试图在视图中显示此列表，但这并未显示任何项目

render: function() {
    var list = this.state.list;
    console.log('Re-rendered');
    return(
        <ul>
        {list.map(function(object, i){
            <li key='{i}'>{object}</li>
        })}
        </ul>
    )
}

list首先设置为null，但后来我用AJAX重新加载它。另一方面，这工作

    <ul>
    {list.map(setting => (
        <li>{setting}</li>
    ))}
    </ul>

这是我的整个组成部分：

var Setting = React.createClass({
   getInitialState: function(){
     return {
       'list': []
     }
   },
   getData: function(){
     var that = this;
     var myHeaders = new Headers();
     var myInit = { method: 'GET',
           headers: myHeaders,
           mode: 'cors',
           cache: 'default' };
    fetch('/list/',myInit)
        .then(function(response){
            var contentType = response.headers.get("content-type");
            if(contentType && contentType.indexOf("application/json") !== -1) {
            return response.json().then(function(json) {
                that.setState({'list':json.settings});
            });
            } else {
            console.log("Oops, we haven't got JSON!");
            }

        })
        .catch(function(error) {
            console.log('There has been a problem with your fetch operation: ' + error.message);
        });;    
   },
   componentWillMount: function(){
    this.getData();
   },
   render: function() {
    var list = this.state.list;
    return(
        <ul>
        {list.map(function(object, i){
            <li key={i}>{object}</li>
        })}
        </ul>
    )
  }
});

Answer 1

您错过了退货声明

 {list.map(function(object, i){
   return <li key={i}>{object}</li>
 })}

这是有效的

  <ul>
    {list.map(setting => (
        <li>{setting}</li>
    ))}
   </ul>

因为使用箭头函数时会自动返回()内的任何内容，但前一个示例使用的是需要return语句的{}。

When should I use `return` in es6 Arrow Functions?这将为您提供更多关于何时何时不使用带箭头函数的return语句的上下文。

list.map没有显示在React Component中

1 个答案: