在React Native中通过API数据渲染SectionList的问题

问题根源 #

你的代码主要存在两个核心问题：

1. 数据格式不符合 SectionList 要求：Object.values() 只提取了配料数据，丢失了分区标题（malt、hops、yeast）；且 yeast 是字符串类型，和 malt/hops 的数组结构不统一。
2. 组件渲染逻辑错误：renderItem 没有返回 JSX 元素，renderSectionHeader 直接输出原始数据而非标题。

完整修复代码 #

import React from 'react';
import { View, Text, SectionList, StyleSheet } from 'react-native';

const Detail = ({ route }) => {
  const beer = route.params.beer;

  // 转换为 SectionList 所需的标准结构：[{title: 分区名, data: 列表数据}, ...]
  const sections = Object.entries(beer.ingredients).map(([title, data]) => {
    // 统一数据格式：将 yeast 字符串转为数组对象，和 malt/hops 结构对齐
    const formattedData = Array.isArray(data) 
      ? data 
      : [{ name: data }];
    return {
      title,
      data: formattedData
    };
  });

  return (
    <SectionList
      sections={sections}
      renderItem={({ item }) => (
        <View style={styles.itemContainer}>
          <Text style={styles.itemName}>{item.name}</Text>
          {/* 渲染配料用量（仅 malt 和 hops 有该字段） */}
          {item.amount && (
            <Text style={styles.itemDetail}>
              {item.amount.value} {item.amount.unit}
            </Text>
          )}
          {/* 渲染啤酒花的添加阶段和属性（仅 hops 有该字段） */}
          {item.add && item.attribute && (
            <Text style={styles.itemDetail}>
              添加阶段: {item.add} | 属性: {item.attribute}
            </Text>
          )}
        </View>
      )}
      renderSectionHeader={({ section }) => (
        <View style={styles.headerContainer}>
          <Text style={styles.headerTitle}>{section.title.charAt(0).toUpperCase() + section.title.slice(1)}</Text>
        </View>
      )}
      keyExtractor={(item, index) => `${item.name}-${index}`} // 避免同名配料的 key 重复
      style={styles.listContainer}
    />
  );
};

// 基础样式提升可读性
const styles = StyleSheet.create({
  listContainer: {
    flex: 1,
    backgroundColor: '#fff',
  },
  headerContainer: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    backgroundColor: '#f8f8f8',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  itemContainer: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  itemName: {
    fontSize: 16,
    fontWeight: '500',
  },
  itemDetail: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
});

export default Detail;

关键修改说明 #

1. 数据格式转换：

   • 使用 Object.entries() 同时获取配料类型的标题（key）和对应数据（value）
   • 将 yeast 字符串转为数组对象，保证所有分区的数据结构统一，避免渲染时出现字段未定义错误

2. 渲染逻辑修复：

   • renderItem 明确返回 JSX 元素，并根据不同配料的字段动态渲染内容（用量、添加阶段等）
   • renderSectionHeader 使用 section.title 作为分区标题，并做首字母大写处理

3. key 优化：

   • 用 item.name + index 作为唯一 key，解决同名配料（如重复出现的 Fuggles）导致的 key 冲突问题

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