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が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

あなたのreturn文

{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文を使用しない場合とそうでない場合に、より多くのコンテキストを提供します。