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語句的更多上下文。