React Component에서 .map을 사용하여 데이터베이스 배열에서 여러 요소를 렌더링 하시겠습니까?

Question

나는 React를 배우고 여러 요소 렌더링과 관련된 문제에 직면했다.

문제는 내가 Firebase에서 Array의 각 항목에 대해 새 div와 svg를 반환해야한다는 것입니다. 나는 React가 단지 1 요소만을 렌더링 할 것이므로 내 콘텐츠를 래퍼에 넣어야한다고 생각합니다. 또한 .map()을 사용하여 배열을 반복하고 이러한 요소를 생성하는 변수를 만들었습니다.

내가 이해하지 못하는 이유는 배열의 각 항목에 대해 새 div 및 svg를 반환하지 않는 이유는 무엇입니까? 대신, 그것만이 1 div와 svg를 생성합니까? 배열에는 폴더 이름 목록이 들어 있습니다.

도움을 주시면 감사하겠습니다.

class SidebarPrivateFolders extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 

    let list = this.props.data.map((currentObj) => { 
     return (
     <div> 
      <svg className="sidebar-icon"> 
      <use xlinkHref={currentObj.xlinkHref}></use> 
      </svg> 
      <div className="public-folders">{currentObj.name}</div> 
     </div> 
    ); 
    }); 

    return (
     <div className="sidebar-section"> 
     <div className="sidebar-section-wrapper"> 
      {list} 
     </div> 
     </div> 
    ); 
    } 
} 

Console.log (this.props.data)는 다음 스크린 샷을 반환합니다.

Answer 1

출력에서 ​​currentObj.name은 array입니다. 따라서 name 배열의 각 요소에 대해 div를 만들려면이 루프를 반복해야합니다. 이 솔루션은 검증되지 않은입니다

class SidebarPrivateFolders extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 

    let list = this.props.data.map((currentObj) => { 
return currentObj.name[0].map((innerArray,i) => { 
     return (
     <div key={i}> 
      <svg className="sidebar-icon"> 
      <use xlinkHref={currentObj.xlinkHref}></use> 
      </svg> 
      <div className="public-folders">{currentObj.innerArray[i]}</div> 
     </div> 
    ); 
    }); 
    }); 

    return (
     <div className="sidebar-section"> 
     <div className="sidebar-section-wrapper"> 
      {list} 
     </div> 
     </div> 
    ); 
    } 

P.S :

당신이 뭔가를 할 수 있습니다. 구문 오류가 발생할 수도 있습니다

Answer 2

편집 V2 : 데이터 입력 데이터 배열에서 항목을 해체, 더 높은 수준에서이 입력을 만드는 경우, 그러나,이 구성 어떻게 재구성 할 효율적일 수있다, 흥미롭게 구성되어 있습니다 그것은 쉽게 다음 기능에 호출하게 :

// Take out the name array and xlinkHref from data 
let {xlinkHref, name} = this.props.data[0]; 
let list = name[0].map((name, i) => { 
    return (
    <div key={'sidebar_'+i}> 
     <svg className="sidebar-icon"> 
     <use xlinkHref={xlinkHref}></use> 
     </svg> 
     <div className="public-folders">{name}</div> 
    </div> 
); 
}); 

데이터 샘플이없는

원래 응답 :

의 반작용 내부 diffing의 알고리즘의 일부가 identifie을로 생성 된 객체의 목록을 필요로 고유 한 '키'속성이있는 d. 각 iterator의 wrapping div에이 속성을 추가해야한다.

지도 기능 내에서지도 색인의 매개 변수를 추적하여 목록의 키를 별도로 유지할 수 있습니다.

동적 어린이 섹션에서 여기의 좋은 설명이있다 : https://facebook.github.io/react/docs/multiple-components.html

이 여기에 코드를 같이 할 수있는 작업은 다음과 같습니다

class SidebarPrivateFolders extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 

    let list = this.props.data.map((currentObj, i) => { 
     return (
     <div key={'sidebarlist_'+i}> 
      <svg className="sidebar-icon"> 
      <use xlinkHref={currentObj.xlinkHref}></use> 
      </svg> 
      <div className="public-folders">{currentObj.name}</div> 
     </div> 
    ); 
    }); 

    return (
     <div className="sidebar-section"> 
     <div className="sidebar-section-wrapper"> 
      {list} 
     </div> 
     </div> 
    ); 
    } 
} 

이이 문제가 해결되는지 알려주세요.