Блог

У меня есть массив данных о запасах для моего магазина, которые я хотел бы отобразить на экране с помощью цикла for. Но визуализируется только первый элемент в массиве, в то время как в массиве 9 элементов. Я также попытался поместить функцию рендеринга за пределы функционального компонента, все та же проблема. Пожалуйста, помогите мне определить проблему. Спасибо.

код

 const Home = () =gt; {  const [isSneakersActive, setIsSneakersActive] = React.useState(false);  const [isWatchActive, setIsWatchActive] = React.useState(false);  const [isBackpackActive, setIsBackpackActive] = React.useState(false);    const screenWidth = Dimensions.get('window').width;    const renderProducts = () =gt; {  for (let i = 0; i lt; Products.length; i  ) {  const element = Products[i];    return (  lt;ProductCardgt;  lt;ProductHeadergt;  {element.discount === 'none' ? (  lt;DiscountLabel style={{backgroundColor: '#fff'}} /gt;  ) : (  lt;DiscountLabelgt;  lt;Text size={13} weight="bold"gt;  {element.discount}  lt;/Textgt;  lt;/DiscountLabelgt;  )}  {element.favourite === 'yes' ? (  lt;Ionicons name="heart-circle" color="#F75058" size={20} /gt;  ) : (  lt;AntDesign name="heart" color="#B6B8C7" size={15} /gt;  )}  lt;/ProductHeadergt;  lt;ProductPicturegt;  lt;View style={ProductPictureStyles.border}gt;  lt;View style={ProductPictureStyles.circle}gt;  lt;Image  source={element.imageSrc}  style={[  ProductPictureStyles.image,  {  height: (screenWidth / 1731) * 433,  },  ]}  /gt;  lt;/Viewgt;  lt;/Viewgt;  lt;/ProductPicturegt;  lt;ProductNamegt;  lt;Text color="#3D44AA" size={(screenWidth / 380) * 18} weight="bold"gt;  {element.name}  lt;/Textgt;  lt;/ProductNamegt;  lt;ProductPricegt;  lt;Text color="#3D44AA" size={(screenWidth / 380) * 18} weight="bold"gt;  {element.price}  lt;/Textgt;  lt;/ProductPricegt;  lt;ProductRatinggt;  lt;AntDesign name="star" color="#fdd344" size={18} /gt;  lt;AntDesign name="star" color="#fdd344" size={18} /gt;  lt;AntDesign name="star" color="#fdd344" size={18} /gt;  lt;AntDesign name="star" color="#fdd344" size={18} /gt;  lt;AntDesign name="staro" color="#f0e8c9" size={18} /gt;  lt;/ProductRatinggt;  lt;/ProductCardgt;  );  }  };    return (  lt;View style={{flex: 1}}gt;  lt;Section5 style={{paddingHorizontal: 0}}gt;  lt;ScrollView showsVerticalScrollIndicator={false}gt;  {isSneakersActive ? (  lt;Section5 style={{paddingHorizontal: 0}}gt;lt;/Section5gt;  ) : isWatchActive ? (  lt;Section5 style={{paddingHorizontal: 0}}gt;lt;/Section5gt;  ) : isBackpackActive ? (  lt;Section5 style={{paddingHorizontal: 0}}gt;lt;/Section5gt;  ) : (  lt;Section5 style={{paddingHorizontal: 0}}gt;  {renderProducts()}  lt;/Section5gt;  )}  lt;/ScrollViewgt;  lt;/Section5gt;  lt;/Viewgt;  );  };    export default Home;  

данные о запасах

 export const Products = [  {  id: 1,  category: 'shoe',  name: 'Air Max Motion',  imageSrc: require('../images/sneekers.png'),  price: '$ 250',  rating: 5,  discount: '8%',  favourite: 'yes',  },  {  id: 2,  category: 'backpack',  name: 'Hiking Starlet',  imageSrc: require('../images/backpack.png'),  price: '$ 350',  rating: 5,  discount: '5%',  favourite: 'yes',  },  {  id: 3,  category: 'backpack',  name: 'Hand Bag',  imageSrc: require('../images/backpack02.png'),  price: '$ 80',  rating: 3.5,  discount: '8%',  favourite: 'no',  },  {  id: 4,  category: 'shoe',  name: 'Nike Air Max',  imageSrc: require('../images/sneekers02.png'),  price: '$ 240',  rating: 4,  discount: 'none',  favourite: 'no',  },  {  id: 5,  category: 'watch',  name: 'Royal Rolex',  imageSrc: require('../images/watch.png'),  price: '$ 50',  rating: 5,  discount: 'none',  favourite: 'no',  },  {  id: 6,  category: 'shoe',  name: 'Hiker Max',  imageSrc: require('../images/sneekers03.png'),  price: '$ 180',  rating: 4.5,  discount: 'none',  favourite: 'no',  },  {  id: 7,  category: 'backpack',  name: 'School Bag',  imageSrc: require('../images/backpack01.png'),  price: '$ 120',  rating: 3.5,  discount: '10%',  favourite: 'no',  },  {  id: 8,  category: 'watch',  name: 'Silver Liner',  imageSrc: require('../images/watch01.png'),  price: '$ 35',  rating: 4.5,  discount: '22%',  favourite: 'yes',  },  {  id: 9,  category: 'shoe',  name: 'Leather Sneaker',  imageSrc: require('../images/sneekers01.png'),  price: '$ 200',  rating: 4,  discount: 'none',  favourite: 'no',  }, ];  

Проблема в том, что вы зацикливаете массив, но возвращаете только первый элемент.

правильный способ сделать это-с помощью карты

 const renderProducts = () =gt; {  for (let i = 0; i lt; Products.length; i  ) {  const element = Products[i];    return ( //return just the first  lt;ProductCardgt;  ...  lt;/ProductCardgt;  );  }  };   

 const renderProducts = () =gt; products.map((element, i) =gt; {    return (  lt;ProductCard key={i}gt;  ...  lt;/ProductCardgt;  );    };