내 배열의 항목을 한 번에 하나씩 렌더링 할 때 어떻게 렌더링 할 수 있습니까?

Question

개체 배열이 있습니다.

각 개체에는 몇 개의 문자열과 문자열 배열이 있습니다.

정렬되지 않은 목록을 사용하여 객체의 문자열 부분 배열을 렌더링하고 싶습니다. 지금 내가 사용

: 위의 코드와

const renderOut = this.props.data.filter(obj => { 
    return this.state.keyToFind.includes(obj.name); 
    }).map((obj, idx) => { 
    return (
    <div key={idx}> 
     <h2>{obj.name}</h2> 
     <ul> 
      <li>{obj.arrayItems}</li> 
     </ul> 
     </div> 
    ); 
}); 

문제는 모든 행에 obj.arrayItems 밖으로 렌더링이다. 예를 ...

[ "컵", "볼", "장난감"]

같이 밖으로 렌더링 ....

cupballtoy를 들어

하지만 난 그것을 얻으려고

• 컵
• 볼
• 장난감
:처럼 보이게하기

한 번에 하나씩 obj.arrayItems를 렌더링 할 수있는 방법이 있습니까?

Answer 1

예, ul 내부의 DOM 요소에 문자열을 반환하는지도 함수를 만듭니다. React에는 이러한 구성 요소를 추적하는 데 도움이되는 고유 한 키 보조가 필요하지만이 경우 간단하게 배열 인덱스를 사용할 수 있습니다.

{ obj.arrayItems.map((item, i) => <li key={i} >{ item }</li>) } 

Answer 2

중첩 된지도 기능을 사용할 수 있습니다.

const renderOut = this.props.data.filter(obj => { 
return this.state.keyToFind.includes(obj.name); 
    }).map((obj, idx) => { 
    return (
    <div key={idx}> 
     <h2>{obj.name}</h2> 
     <ul> 
     {obj.arrayItems.map(item => <li key={item}>{item}</li>)} 
     </ul> 
     </div> 
    ); 
});