React 16 맵 렌더링 키를 반복합니다.

Question

Immutable.js 맵을 반복 처리하여 구성 요소를 렌더링하려고합니다. 렌더링 중이지만 페이지의 키도 렌더링합니다. 왜 그런지 모르겠습니다.

render() { 
    const myMap = new Map({foo: '', bar: 'http://google.com/'}) 
    const {showFoo, titleAndUrl} = this.props 
    return (
     <ul style={[ 
     styles.container, 
     showFoo && styles.container.inline, 
     ]}> 
     {myMap.map((title, url) => this.renderTab(url, title))} 
     </ul> 
    ) 
    } 

    renderTab(title, url) { 
    const {showFoo, isFoo} = this.props 
    return (
     <li key="sb" style={[ 
     styles.listItem, 
     showFoo && styles.listItem.inline, 
     ]}> 
     <a 
      href={url} 
      key={title} 
      style={[ 
      styles.link, 
      styles.activeLink, 
      showFoo && styles.link.inline, 
      ]} 
      className={isFoo ? "style" : ''}> 
      {title} 
     </a> 
     </li> 
    ) 
    } 
} 

두 개의 이름과 URL은 그러나 키가 렌더링 즉 foo는 두 번 렌더링되는 중복 등 바이지만, foo는 바 키 중 하나가 외부 렌더링되고있어 어떤 제안, 어떤 스타일이 없습니다 올바르게 렌더링됩니다 this.renderTab

참조 이미지 :

렌더링 된 HTML :

<ul data-radium="true" 
    style="display: flex; align-items: center; padding: 0px; margin: 0px; list-style: none; width: 100%; border-top: 1px solid rgb(221, 221, 221); height: 48px;"> 
    foo 
    <li data-radium="true" style="display: flex; width: 50%; height: 47px; cursor: default;"><a href="" 
                           class="" 
                           data-radium="true" 
                           style="display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none; font-weight: 500; font-size: 16px; color: rgb(0, 31, 91); transition: color 0.1s linear;">foo</a> 
    </li> 
    bar 
    <li data-radium="true" style="display: flex; width: 50%; height: 47px; cursor: default;"><a 
      href="http://google.com" class="" data-radium="true" 
      style="display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none; font-weight: 500; font-size: 16px; color: rgb(0, 31, 91); transition: color 0.1s linear;">bar</a> 
    </li> 
</ul> 

Answer 1

인수의 순서를 뒤섞어 title을 url으로 지정하고 그 반대의 경우도 마찬가지입니다.

또한 Immutable.Map.map의 콜백 함수에 전달 된 인수는 (1) value, (2) 키이므로 첫 번째 인수는 URL이고 두 번째 인수는 제목입니다.

변경과 같이 map에 대한 호출과 라인 :

{myMap.map((url, title) => this.renderTab(title, url))} 

또 다른 문제는 모든 렌더링되는 목록 항목 요소의 "A"의 키를 동일한 키 "SB"를 가지고있다 요소가 변경되지만 필요하지는 않습니다. JSX이에 renderTab에 의해 반환

변경 :

<li key={title} style={[ 
    styles.listItem, 
    showFoo && styles.listItem.inline, 
    ]}> 
    <a 
     href={url} 
     style={[ 
     styles.link, 
     styles.activeLink, 
     showFoo && styles.link.inline, 
     ]} 
     className={isFoo ? "style" : ''}> 
     {title} 
    </a> 
    </li> 

마지막으로, 주요 실수는 당신이 그래서, 당신은 배열을 반환하는 Immutable.Map.map을 기대하지만, 또 다른 불변의 맵을 반환하지 않는다는 것입니다 valueSeq 및 toArray을 사용하여 맵 함수가 반환 한 값을 배열로 변환합니다.

그래서지도 문은 실제로 다음과 같이한다 :()는`목록을 반환

{myMap.map((url, title) => this.renderTab(title, url)).valueSeq().toArray()} 

→ see related post on Stack Overflow