list.map阵营组件

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首先设置为空，但后来我重装它与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

你缺少你return语句

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

这个作品

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

因为任何，所以

在使用箭头功能时，()内的内容会自动返回，但前面的示例使用{}需要返回语句。

When should I use `return` in es6 Arrow Functions?这将给你更多关于什么时候和何时不使用带有箭头函数的return语句的更多上下文。