배열의 일부만 매핑 할 수 있습니까? (Array.map())

Question

React.js를 프론트 엔드 프레임 워크로 사용하여 프로젝트를 빌드하고 있습니다. 특정 페이지에서 사용자에게 전체 데이터 세트를 표시하고 있습니다. 이 전체 데이터 집합을 포함하는 배열이 있습니다. JSON 객체의 배열입니다. 이 데이터를 사용자에게 제공하는 측면에서 Array.map()을 사용하여 각 데이터 항목을 반환하여 전체 데이터 세트를 표시하도록하고 있습니다.

이것은 올바른 방향으로 나아가는 단계이지만 모든 데이터 세트의 일부만 표시해야하며 전체 데이터 세트 중 얼마나 많은 부분이 있는지 알고 있어야합니다. 표시된 데이터 세트 및 아직 표시되지 않은 데이터 세트의 양을 표시합니다. 기본적으로 나는 더 많은 데이터 아이템을 사용자에게 로딩하는 "더보기"버튼과 같은 것을 만들고있다.

여기서 '피드'는 JSON 객체의 배열을 나타냅니다. (이 전체 데이터 세트를 표시한다.) I가 손 전에 배열을 파괴하지 않고 어레이의 일부에() .MAP 사용 가능한지 궁금

return (
    <div className={feedClass}> 
    { 
    feed.map((item, index) => { 
     return <FeedItem key={index} data={item}/> 
    }) 
    } 
    </div> 
); 

? 가능한 해결책은 전체 데이터 집합을 잡고 부분으로 나누고 그 부분을 .map()하는 것입니다. 그러나 부분적으로 .map() 할 수있는 방법이 있습니다. 그거야?

모든 의견을 환영합니다. 감사!

Answer 1

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; 
 
var citrus = fruits.slice(1, 3); 
 

 
// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] 
 
// citrus contains ['Orange','Lemon']

은 당신의 매핑 단계에서 해킹으로이 문제를 해결하려고하지 마십시오. 매핑 전에 대신

, slice() the list to the right length first :

class Feed extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    
 
    this.handleShowMore = this.handleShowMore.bind(this) 
 
    
 
    this.state = { 
 
     items: ['Item A', 'Item B', 'Item C', 'Item D'], 
 
     showItems: 2 
 
    } 
 
    } 
 
    
 
    handleShowMore() { 
 
    this.setState({ 
 
     showItems: 
 
     this.state.showItems >= this.state.items.length ? 
 
      this.state.showItems : this.state.showItems + 1 
 
    }) 
 
    } 
 
    
 
    render() { 
 
    const items = this.state.items.slice(0, this.state.showItems).map(
 
     (item) => <div>{item}</div> 
 
    ) 
 
    
 
    return (
 
     <div> 
 
     {items} 
 
     <button onClick={this.handleShowMore}> 
 
      Show more! 
 
     </button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 
    
 
ReactDOM.render(
 
    <Feed />, 
 
    document.getElementById('root') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='root'></div>

Answer 2

Array#map은 모든 항목을 반복합니다.

map() 방법이 어레이의 모든 요소에 대해 제공되는 함수 호출의 결과로 새로운 배열을 생성한다.

에는 filter() 방법이 제공 기능에 의해 구현 된 시험을 통과하는 모든 요소와 새로운 배열을 작성 Array#filter

사용할 수있다.

원하는 항목에 대해 적용한 다음 원하는 형식의지도를 적용하십시오. 그냥 배열의 일부를 매핑하려면

Answer 3

, 먼저 조건에 따라 예상되는 부분을 얻기 위해) (배열을 필터링한다 : 맵의 어떤 버전이 없습니다

array.filter(item => <condition>).map(); 

Answer 4

() 함수를 배열의 일부만을 매핑합니다.

.map()은 .filter()와 함께 사용할 수 있습니다.

현재 요소의 색인을 map의 두 번째 인수로 가져오고, 현재 페이지와 페이지 크기에 대한 변수가 있으면 실제로 조각화하지 않고도 배열에서 올바른 페이지를 쉽게 필터링 할 수 있습니다. 배열을 매핑하기 전에 당신이 어떤 페이지 매김을하고 싶지처럼

var currentPage = 1; 
var pageSize = 25; 

dataArray.filter(function(elt, index) { 

    var upperThreshold = currentPage * pageSize; 
    var lowerThreshold = currentPage * pageSize - pageSize; 

    return index < upperThreshold && index > lowerThreshold; 

}); 

Answer 5

당신은 그것을 보인다는 slice 기능을 사용할 수 있습니다.

Answer 6

Array.reduce 당신이 요구하는지해야한다. 원하는 범위에 따라 if 문을 변경하십시오.

var excludeAfterIndex = 5; 

feed.reduce((mappedArray, item, index) => { 
    if (index > excludeAfterIndex) { // Whatever range condition you want 
    mappedArray.push(<FeedItem key={index} data={item}/>); 
    } 

    return mappedArray; 
}, []); 

Answer 7

예, 색인을 기반으로 배열의 일부를 매핑 할 수 있습니다. 예를 들어,

yourArray = yourArray.map(function (element, index, array) { 
     if (array.indexOf(element) < yourIndex) { 
      return { 
       //logic here 
      }; 
     } else { 
      return { 
       //logic here 
      }; 
     } 

    });