반응 구성 요소가 foreach 루프에서 렌더링되지 않습니다?

Question

React Route가 주어진 구성 요소 (컨테이너)로 리디렉션되는 탭을 열면 작은 응용 프로그램이 있습니다. 컨테이너에서 자식 구성 요소를 렌더링하려고합니다. 나는 foreach 루프를 사용하여 자식에게 주어질 필요가있는 소품이있는 목록을 살펴 봅니다. 그러나 자식은 렌더링되지 않습니다.

목록 클래스에 의존하는 라이브러리를 사용하기 때문에 맵을 사용하고 싶지 않습니다.

render() { 
    return ( 
     <div> 
      {this.state.list.ForEach((element) => 
       <ChildComponent childName={element.name} 
     } 
     </div> 
    ); 
} 

}

Answer 1

당신은 Array.map와 Array.forEach을 혼동하고 있습니다. forEach 아무 것도 반환하지 않습니다. 올바른 방법은 :

<div> 
    {this.state.list.map((element, index) => 
     <ChildComponent key={index} childName={element.name} 
    } 
</div> 

map 다른 요소에 지정된 element이 경우 성분으로 변환한다. map을 호출 한 결과는 렌더링되는 구성 요소의 배열입니다. forEach 항상 undefined 따라서 코드의 결과는 서면과 동일 반환 구성 요소의 목록을 렌더링 할 때 key이 필요하다

<div> 
    {undefined} 
</div> 

하는 것으로.