JSX 元素不在循环内呈现答案

【问题标题】：JSX element doesn't render inside a loopJSX 元素不在循环内呈现
【发布时间】：2022-01-06 07:31:31
【问题描述】：

我的购物商店有一组库存数据，我想借助 for 循环在屏幕上呈现这些数据。但只有数组中的第一项被渲染，而数组有 9 个项目。我也尝试过将渲染功能放在功能组件之外，仍然是同样的问题。请帮我找出问题所在。谢谢。

代码

const Home = () => {
    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 = () => {
      for (let i = 0; i < Products.length; i++) {
        const element = Products[i];
  
        return (
          <ProductCard>
            <ProductHeader>
              {element.discount === 'none' ? (
                <DiscountLabel style={{backgroundColor: '#fff'}} />
              ) : (
                <DiscountLabel>
                  <Text size={13} weight="bold">
                    {element.discount}
                  </Text>
                </DiscountLabel>
              )}
              {element.favourite === 'yes' ? (
                <Ionicons name="heart-circle" color="#F75058" size={20} />
              ) : (
                <AntDesign name="heart" color="#B6B8C7" size={15} />
              )}
            </ProductHeader>
            <ProductPicture>
              <View style={ProductPictureStyles.border}>
                <View style={ProductPictureStyles.circle}>
                  <Image
                    source={element.imageSrc}
                    style={[
                      ProductPictureStyles.image,
                      {
                        height: (screenWidth / 1731) * 433,
                      },
                    ]}
                  />
                </View>
              </View>
            </ProductPicture>
            <ProductName>
              <Text color="#3D44AA" size={(screenWidth / 380) * 18} weight="bold">
                {element.name}
              </Text>
            </ProductName>
            <ProductPrice>
              <Text color="#3D44AA" size={(screenWidth / 380) * 18} weight="bold">
                {element.price}
              </Text>
            </ProductPrice>
            <ProductRating>
              <AntDesign name="star" color="#fdd344" size={18} />
              <AntDesign name="star" color="#fdd344" size={18} />
              <AntDesign name="star" color="#fdd344" size={18} />
              <AntDesign name="star" color="#fdd344" size={18} />
              <AntDesign name="staro" color="#f0e8c9" size={18} />
            </ProductRating>
          </ProductCard>
        );
      }
    };
  
    return (
      <View style={{flex: 1}}>
        <Section5 style={{paddingHorizontal: 0}}>
          <ScrollView showsVerticalScrollIndicator={false}>
            {isSneakersActive ? (
              <Section5 style={{paddingHorizontal: 0}}></Section5>
            ) : isWatchActive ? (
              <Section5 style={{paddingHorizontal: 0}}></Section5>
            ) : isBackpackActive ? (
              <Section5 style={{paddingHorizontal: 0}}></Section5>
            ) : (
              <Section5 style={{paddingHorizontal: 0}}>
                {renderProducts()}
              </Section5>
            )}
          </ScrollView>
        </Section5>
      </View>
    );
  };
  
  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',
  },
];

【问题讨论】：

在您的renderProducts 组件中，您正在无条件地使用return 语句，因此循环的代码块只会执行第一次。

标签： reactjs react-native for-loop jsx

【解决方案1】：

问题是您正在循环数组但只返回第一个元素。

正确的做法是通过地图

const renderProducts = () => {
      for (let i = 0; i < Products.length; i++) {
        const element = Products[i];
  
        return ( //return just the first
          <ProductCard>
            ...
          </ProductCard>
        );
      }
    };

const renderProducts = () => products.map((element, i) => {
    
        return (
          <ProductCard key={i}>
            ...
          </ProductCard>
        );
     
    };

【讨论】：