React Native中useState处理数组模型并渲染数据的问题求助

你需要完成状态初始化和渲染逻辑填充两个核心步骤，以下是完整实现：

1. 完善状态初始化 #

你的categories状态初始为空，需要在组件挂载时将导入的CategoryData赋值给它。如果需要使用Category类的实例，也可以先将原始数据转换为类实例数组。

2. 实现渲染逻辑 #

遍历categories数组，渲染每个分类的图片、名称和子分类列表，注意给列表项添加唯一key属性。

完整代码（app.js） #

import React, { useState, useEffect } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { Category } from './models'; // 修正导入方式，匹配models.js的导出
import CategoryData from './data';

function MainCategory() {
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    // 可选：将原始数据转为Category类实例，若不需要类方法可直接用CategoryData
    const categoryInstances = CategoryData.map(item => 
      new Category(item.id, item.name, item.src, item.subCategories)
    );
    setCategories(categoryInstances);
  }, []);

  return (
    <View style={styles.container}>
      {categories.map((item) => (
        <View key={item.id} style={styles.categoryItem}>
          {/* 渲染分类图片 */}
          <Image 
            source={{ uri: item.src }} 
            style={styles.categoryImage}
            resizeMode="cover"
          />
          {/* 渲染分类名称 */}
          <Text style={styles.categoryName}>{item.name}</Text>
          {/* 渲染子分类 */}
          <View style={styles.subCategoryContainer}>
            <Text style={styles.subCategoryTitle}>子分类：</Text>
            {item.subCategories.map((sub, index) => (
              <Text key={index} style={styles.subCategoryItem}>{sub}</Text>
            ))}
          </View>
        </View>
      ))}
    </View>
  );
}

// 基础样式优化
const styles = StyleSheet.create({
  container: {
    padding: 16,
    gap: 16,
  },
  categoryItem: {
    borderWidth: 1,
    borderColor: '#eee',
    borderRadius: 8,
    padding: 12,
  },
  categoryImage: {
    width: '100%',
    height: 150,
    borderRadius: 8,
    marginBottom: 8,
  },
  categoryName: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  subCategoryContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
    alignItems: 'center',
  },
  subCategoryTitle: {
    fontSize: 14,
    color: '#666',
  },
  subCategoryItem: {
    fontSize: 14,
    backgroundColor: '#f5f5f5',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
});

export default MainCategory;

关键注意点 #

• 导入修正：models.js中用export class Category导出，需用解构导入import { Category } from './models'，而非默认导入。
• 状态初始化：用useEffect在组件首次挂载时初始化状态，避免重复赋值。
• 列表key：遍历列表必须添加唯一key，优先用分类id；子分类无唯一标识时可临时用index（不推荐在列表增删/排序场景使用）。
• 图片处理：网络图片需传入{ uri: item.src }作为source，设置宽高和resizeMode避免拉伸变形。

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