어레이의 일부만 매핑할 수 있습니까? (Array.map())

어레이의 일부만 매핑할 수 있습니까? (Array.map())

저는 React.js를 프런트 엔드 프레임워크로 사용하여 프로젝트를 구축하고 있습니다.한 특정 페이지에 사용자에게 전체 데이터 세트를 표시합니다.이 전체 데이터 세트를 포함하는 어레이가 있습니다.JSON 오브젝트의 배열입니다.이 데이터를 사용자에게 표시하는 것에 관해서는 현재 Array.map()을 사용하여 각 데이터 항목을 반환함으로써 데이터 세트 전체를 표시하고 있습니다.

이것은 올바른 방향으로의 순서입니다만, 현재는 데이터 세트의 일부만을 표시해야 합니다.전체 데이터 세트의 표시량과 아직 표시되지 않은 데이터 세트의 양을 알 수 있는 컨트롤도 필요합니다.기본적으로 사용자에게 더 많은 데이터를 로드하는 "더 보기" 버튼과 같은 것을 만들고 있습니다.

다음은 '피드'가 JSON 객체 배열을 나타내는 예입니다.(데이터 세트 전체가 표시됩니다).

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

사전에 어레이를 해체하지 않고 어레이의 일부에서만 .map()을 사용할 수 있는지 궁금합니다.가능한 해결책은 완전한 데이터 세트를 유지한 후 분할하고 그 부분을 .map()하는 것입니다만, 분할하지 않고 어레이의 일부를 .map()하는 방법이 있습니까?

모든 피드백에 감사드립니다.감사합니다!

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

대신 매핑 전에 올바른 길이로 목록을 먼저 표시하십시오.

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>

내 머릿속에서 가장 쉬운 방법은 필터와 지도를 사용하는 것이다.

const feed = [1,2,3,4,5,6,7,8,9,10,11]
feed.filter((item, index) => index < 5).map((filteredItem) => //do somthing with filtred item here//)

여기서 5는 당신이 원하는 아이템의 개수입니다.

슬라이스 함수를 사용하여 어레이를 매핑할 수 있습니다.여기서 페이지 매김을 하고 싶은 것 같습니다.

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

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

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;
}, []);

배열의 일부만 매핑하는 경우 먼저 조건에 따라 예상되는 부분을 얻기 위해 배열의 filter()를 수행해야 합니다.

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

예, 인덱스를 기반으로 배열 부분을 매핑할 수 있습니다.예를 들어 다음과 같습니다.

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

    });

슬라이스를 사용하여 배열의 일부를 가져올 수 있습니다.

const data = [1,2,3,4,5,6,7,8,9,10,11]

var updatedData = data.slice(0, 3);

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

메서드는 이 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 새 배열을 만듭니다.

사용할 수 있습니다.

메소드는 제공된 함수에 의해 구현된 테스트를 통과한 모든 요소를 사용하여 새 배열을 만듭니다.

원하는 아이템에 대해 지도를 신청하고 원하는 포맷에 대해 지도를 신청합니다.

배열의 일부만 매핑하는 map() 함수의 버전은 없습니다.

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

현재 요소의 인덱스를 맵의 두 번째 arg로 얻을 수 있습니다.현재 페이지와 페이지 크기에 대한 변수가 있는 경우 오른쪽 페이지를 실제로 잘라낼 필요 없이 배열에서 쉽게 필터링할 수 있습니다.

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;

});

사용.slice()맵에 조건을 추가하거나 함수를 줄이는 것보다 낫지만 어레이 세그먼트의 사용되지 않는 추가 복사본이 생성됩니다.당신이 무엇을 하느냐에 따라, 그것은 바람직하지 않을 수 있습니다.대신 커스텀 맵 기능을 사용합니다.

function sliceMap(fn, from, toExclusive, array) {
  const len = toExclusive - from;
  const mapped = Array(len);

  for (let i = 0; i < len; i++) {
    mapped[i] = fn(array[i + from], i);
  }

  return mapped;
};

주의:fn는 어레이 값과 제로 베이스 인덱스를 수신합니다.원래 인덱스를 통과해야 할 수도 있습니다.i + from） 。또한 풀 패스를 원하실 수도 있습니다.array세 번째 매개 변수로서Array.map한다.

이 간단한 접근법 사용

const [limit, setLimit] = useState(false);
const data = [{name: "john}, {name: 'Anna'}]

여기에서는, 다음의 2개의 케이스가 있습니다.

1. 첫 번째 데이터(John)만 표시
2. 모두 표시

data.slice(0, extended ? data.length : 1).map((item, index) => <Text>{item.name}</Text>)

....

언급URL : https://stackoverflow.com/questions/39455224/is-it-possible-to-map-only-a-portion-of-an-array-array-map