왜 ES6 맵을 통해 iterating이 ReactJS에서 자식 요소를 생성하지 않습니까?

Question

데이터 및 표제를 소품으로 사용하는 React 구성 요소를 만들려고합니다. 나는지도의 forEach 메쏘드가 필요한 자식 요소를 생성하지 못하게하는 문제를 겪었다.

는

열에 대한 입력 소품은 다음과 같습니다 : 여기

let cols = { 
    payment: 'Payment', 
    date: 'Processing Date', 
    amount: 'Amount', 
    payee: 'Payee' 
}; 

는 제목 요소를 생성 내 반작용 테이블 구성 요소의 메서드입니다 :

generateTableHead() { 
    let columnsMap = new Map((Object.entries(this.props.columns))); 
    let i = 0; 
    return (
    <tr> 
     {columnsMap.forEach((columnValue) => 
     <th key={i++}> 
      {columnValue} 
     </th> 
    )} 
    </tr> 
); 
} 

문제가있는 <th> 아이들은 '돈 있음 반환 된 <tr> 개체에 존재하지 않습니다. 나는 emtpy <tr></tr>를 얻는다.

그러나 Array.prototype.map을 사용하면 자식 <th> 요소가 제대로 만들어집니다. 코드가 차라리 두 번째 버전에서 배열 인덱스를 사용하는 대신 Map 객체에 키와 값을 참조 할거야 때문에 약간 더 이해하기 때문에

generateTableHead() { 
    let columnsArray = Object.entries(this.props.columns); 
    return (
    <tr> 
     {columnsArray.map((column, index) => 
     <th key={index}>{column[1]}</th> 
    )} 
    </tr> 
); 
} 

나는 첫 번째 버전을 선호합니다.

매우 간단한 설명이 있거나 확실하지 않은 매우 간단한 오류가 발생했습니다. 누구든지이 문제를 지적 할 수 있다면 크게 고맙겠습니다!

Answer 1

map() 또는 reduce()과 달리 forEach()은 아무 것도 반환하지 않기 때문입니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=control

대해 forEach()에서

각 배열 요소 한번 콜백 함수를 실행한다; map() 또는 reduce()와 달리 항상 정의되지 않은 값을 반환하며 체인 가능하지 않습니다. 전형적인 유스 케이스는 체인의 끝에 부작용을 실행하는 것이다.

Answer 2

이유는이 array 요소를 반복하는 단지 사용, 대해 forEach는 어떤 일를 반환하지 않습니다,하지만 map는 array의 각 항목에 대해 return 뭔가하는 데 사용됩니다. forEach을 사용하려면이 방법으로 사용할 수 있습니다. 변수를 사용하여 ui 항목을 저장하고 forEach를 사용하여 배열을 반복하고 해당 변수에 항목을 밀어 넣은 다음 모든 td가있는 tr을 반환합니다. :

generateTableHead() { 
    let columnsMap = new Map((Object.entries(this.props.columns))); 
    let uiItems = []; 
    let i = 0; 
    columnsMap.forEach((columnValue) => 
     uiItems.push(<th key={i++}> 
         {columnValue} 
        </th>) 
    ) 
    return (
     <tr> {uiItems} </tr> 
    ); 
} 

확인이 조각은지도와 대해 forEach 차이를 이해하는 것이 :

let a = [1,2,3,4,5]; 
 

 
let b = a.map(e => e + 1); //it will return e + 1; 
 

 
let c = a.forEach(e => e + 1); //it will not return anything 
 

 
console.log('b', b); 
 

 
console.log('c', c);

Answer 3

당신은 세코의 배열 인덱스에 의존 할 필요가 없습니다 버전. Object.entries 대신 Object.values을 사용할 수 있습니다.

generateTableHead() { 
    let columnsValues= Object.values(this.props.columns); 
    let i = 0; 
    return (
    <tr> 
     {columnsValues.map((columnsValue) => 
     <th key={i++}>{columnsValue}</th> 
    )} 
    </tr> 
); 
}