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와 함께.

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> 

작동 수익 문을 누락 : 반면에 이것은 약자로 이것은 내 모든 구성 요소입니다

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

작동

화살표 함수를 사용할 때 () 내의 내용이 자동으로 반환되지만 이전 예에서는 return 문이 필요한 {}을 사용했습니다.

When should I use `return` in es6 Arrow Functions? 이렇게하면 화살표 기능이있는 return 문을 사용하지 않을 때와 사용하지 않을 때 주위에 더 많은 컨텍스트가 제공됩니다.