React Native中使用Axios获取数组数据并按分类展示列表

嘿，我来帮你搞定这个带分类的商品列表！你已经能展示分类了，那接下来只需要把每个分类下的商品子列表渲染出来就行，我给你一步步拆解，附完整代码示例：

1. 先确保用Axios正确获取数据 #

首先咱们得把JSON数据通过Axios请求拿到，并用状态管理数据的加载状态、错误状态和数据本身。在函数组件里可以这么写：

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import axios from 'axios';

const ProductCategoryList = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        // 替换成你的实际接口地址，也可以直接传入你提供的静态JSON数据
        const response = await axios.get('你的商品分类接口URL');
        setData(response.data);
      } catch (err) {
        setError('获取数据失败，请稍后重试');
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, []);

  // 加载中、错误状态的处理
  if (loading) {
    return <View style={styles.center}><Text>加载中...</Text></View>;
  }

  if (error) {
    return <View style={styles.center}><Text>{error}</Text></View>;
  }

  // 核心渲染逻辑在下面
}

2. 嵌套渲染分类与商品列表 #

接下来是核心的渲染部分，咱们用FlatList渲染分类（它比ScrollView更适合长列表，性能更好），然后在每个分类项里，再渲染该分类下的商品列表——这里推荐用嵌套FlatList（适合大数据量），数据量小的话也可以用map遍历。

推荐方案：嵌套FlatList实现 #

在上面的组件里，替换核心渲染逻辑部分：

// 核心渲染逻辑
return (
  <FlatList
    data={data}
    keyExtractor={(item) => item.id}
    renderItem={({ item: category }) => (
      <View style={styles.categoryContainer}>
        {/* 分类标题 */}
        <Text style={styles.categoryTitle}>{category.name}</Text>
        {/* 商品子列表 */}
        <FlatList
          data={category.list}
          keyExtractor={(product) => product.idp}
          horizontal={false} // 想横向滚动就改成true
          renderItem={({ item: product }) => (
            <View style={styles.productItem}>
              <Text style={styles.productName}>{product.namep}</Text>
            </View>
          )}
        />
      </View>
    )}
  />
);

简化方案：用map渲染商品列表（数据量小时可选） #

如果你的商品数量不多，也可以直接用map遍历：

// 核心渲染逻辑
return (
  <FlatList
    data={data}
    keyExtractor={(item) => item.id}
    renderItem={({ item: category }) => (
      <View style={styles.categoryContainer}>
        <Text style={styles.categoryTitle}>{category.name}</Text>
        {category.list.map((product) => (
          <View key={product.idp} style={styles.productItem}>
            <Text style={styles.productName}>{product.namep}</Text>
          </View>
        ))}
      </View>
    )}
  />
);

3. 添点基础样式让界面更规整 #

最后加个简单的样式，让列表看起来更舒服：

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  categoryContainer: {
    marginVertical: 12,
    marginHorizontal: 16,
  },
  categoryTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
    color: '#333',
  },
  productItem: {
    padding: 12,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    marginBottom: 8,
  },
  productName: {
    fontSize: 16,
    color: '#666',
  },
});

小提示 #

• 记得给每个列表项设置唯一的key（keyExtractor或者key属性），避免React的警告
• 如果想让商品列表横向滚动，把嵌套FlatList的horizontal属性设为true即可
• 可以给商品项添加点击事件，比如onPress={() => handleProductPress(product)}，跳转到商品详情页

内容的提问来源于stack exchange，提问作者Camila F