Блог

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

 {goldendoodles.map((goldendoodles) => (
       
          <Card style={{width: '20rem'}}>
          <img className="cardimage" src={goldendoodles.image} alt={goldendoodles.name} />
          <h1>{goldendoodles.name}</h1>
          <p>{goldendoodles.price}</p>
        
        
        <h1>{goldendoodles.description}</h1>
          </Card>
      ))}
    ```
  

В настоящее время он отображает все элементы, как ожидалось
Мне интересно, есть ли способ сопоставить только определенное количество элементов в массиве, а не все целиком?
Спасибо за ваше время.

Для первых 3 элементов вы могли бы использовать .slice() (doc)

slice() Метод возвращает мелкую копию части массива в новый объект массива, выбранный из start в end ( end не включен), где start и end представляют индекс элементов в этом массиве

 { goldendoodles.slice(0, 3).map((goldendoodles) => (...) }
  

Используйте функцию массива, такую как slice (doc) или filter doc.

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

 goldendoodles.slice(0, 3).map((goldendoodles) => (...)
  

 goldendoodles.filter(goldendoodle => /* Your filter function */).map((goldendoodles) => (...)
  

Другое решение для первых трех элементов:

 { goldendoodles.filter((e, i) => i < 3).map(goldendoodle => {} ) }
  

Или вы могли бы сделать это за один шаг:

 { goldendoodles.reduce((a, c, i) => {
  if (i < 3) a[i] = c
  return a
}, []) }
  

Да, вы можете отфильтровать массив с помощью .filter() перед использованием .map() как:

 {
   goldendoodles.filter((_, index) => index < 3)
                .map((goldendoodles) => (
                     <Card style={{width: '20rem'}}>
                          { /* your elements */ }
                     </Card>
                )
}
  

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

Исходя из этого, вы получаете первые 3 элемента из вашего массива в следующем примере:

 const data = [1,2,3,4,5,6,7,8];
const result = data.filter((_, index) => index < 3);
console.log(result);