Можно ли отобразить только часть массива? (Array.map())

Question

Я строю проект с использованием React.js в качестве интерфейсного фреймворка. На одной конкретной странице я показываю полный набор данных для пользователя. У меня есть массив, содержащий этот полный набор данных. Это массив объектов JSON. Что касается представления этих данных пользователю, в настоящее время у меня есть отображение всего набора данных путем возврата каждого элемента данных с помощью Array.map().

Это шаг в правильном направлении, но теперь мне нужно отображать только часть набора данных, а не все это. Мне также нужен некоторый контроль с точки зрения того, сколько из общего набора данных имеет и какая часть набора данных еще должна отображаться. В основном я создаю что-то вроде кнопки «просмотреть больше», которая загружает пользователю больше элементов данных.

Вот что я использую сейчас, когда 'feed' представляет мой массив объектов JSON. (Это отображает весь набор данных.)

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

мне интересно, если можно использовать .map() на только часть массива без необходимости разбить массив перед рукой? Я знаю, что возможное решение будет состоять в том, чтобы удерживать полный набор данных и разбивать его на части, а затем .map() те части, но есть способ .map() часть массива без необходимости разбивать это?

Все отзывы принимаются. Благодаря!

Answer 1

Не пытайтесь решить эту проблему с помощью хака в вашем шаге отображения.

Вместо 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() метод создает новый массив с результатами вызова при условии функции на каждом элементе в этом массиве.

Вы можете использовать Array#filter

Метод filter() создает новый массив со всеми элементами, которые проходят тест, реализованный при условии функции.

по нужным Вам предметам, а затем применить карту для требуемого формата.

Answer 3

Если вы просто хотите, чтобы отобразить часть массива, вы должны сначала фильтр() ваш массив, чтобы получить ожидаемую часть в соответствии с условиями:

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

Answer 4

Там нет версии карты() функции который отображает только часть массива.

Вы можете использовать .map() в сочетании с .filter().

Вы получаете индекс текущего элемента в качестве второго аргумента карты, и если у вас есть переменная для текущей страницы и размера страницы, вы можете легко фильтровать правую страницу из своего массива, не перебирая ее на самом деле.

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 перед тем, чтобы отобразить массив, похоже, что вы хотите сделать некоторые пагинацию там.

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

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

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 
      }; 
     } 

    });