Reactjs지도는 작동하지만 forEach는

Question

입니다. forEach와 map의 차이점을 이해하는 데 어려움을 겪고 있습니다. 다음의 렌더링 함수에서 'forEach'가 'map'으로 대체되면 작동합니다. 왜 'forEach'와 함께 작동하지 않는지 나는 이해할 수 없다. {item.id}와 {item.text} 모두 두 가지 방법과 함께 사용됩니다. 그래서 'forEach'를 사용할 때 'TodoItem'에 대한 소품이 설정되지 않은 이유는 무엇입니까?

render() {  
    return(

    <ul> 
     {this.props.items.forEach(function(item) { 

      return (
       <TodoItem id={item.id} text={item.text} />) 
     })} 
    </ul> 
); 
} 

'대해 forEach는'이 작동하지 않습니다 오는 방법 아무것도 반환하지 않습니다 그래서 경우 다음 중 하나를

render() {  
    return(

    <ul> 
     {this.props.items.forEach(function(item) {    

       <TodoItem id={item.id} text={item.text} /> 
     })} 
    </ul> 
); 
} 

Answer 1

map 함수는 항목 배열을 반환하고 forEach은 루프를 반복합니다. 이 코드 작업을 사용하려면 : jsx/react context에

render() {  
    const items = []; 
    this.props.items.forEach(item => items.push(
          <li> 
           <TodoItem id={item.id} key={item.id} text={item.text} /> 
          </li> 
         )) 

    return(

    <ul> 
     {items} 
    </ul> 
); 
} 

Answer 2

대해 forEach이 맥락에서 작동하지 않는 이유를 이해에 대한 간단한 예를보십시오 :

를

[1,2,3].forEach((n)=> n); => returns undefined 

[1,2,3].map((n)=> n); => returns [1,2,3] 

Answer 3

기본적으로 map이 forEach 아무것도 반환하는 동안 배열을 반환,

을 당신은 파서가 노드에서 변환 할 구성 요소/노드 태그의 목록을 반환 할 필요가 모두 실제 및 가상 돔에서;

forEach와 같은 부작용으로 작업하면 구문 분석 할 항목이 없습니다.

Answer 4

@Nenad Vracar가 언급 한대로 map은 실제로 물건을 반환합니다. 다른 배열, 객체 또는 코드 일부에 대해 일을하고 싶다면 forEach을 사용할 수 있습니다. 하지만 DOM에 표시되는 것을 끝내기 위해 반환하려는 경우가 있기 때문입니다. map을 사용하십시오.

매핑 할 때 return도 잊지 마세요. forEach에 대한 반품을 사용할 필요가 없기 때문에 일반적인 실수입니다.