嵌套FlatList不显示求助：基于Realm数据的条件渲染异常

核心问题梳理 #

1. 状态初始化错误：constructor中多次直接赋值this.state，后续赋值会完全覆盖之前的状态，导致最终仅保留最后一次赋值的FlatListIngredientItems，FlatListInventoryItems被覆盖丢失。
2. 嵌套FlatList性能与渲染问题：内层FlatList直接使用全量食材数据，在renderItem中做条件判断会遍历所有项，且不满足条件时无返回值，触发React渲染警告，同时性能低下。
3. Realm数据处理冗余：realm.objects()返回的是Realm集合对象，本身支持直接作为FlatList数据源，无需用Object.values()转换。

修复后的完整代码 #

import * as React from 'react';
import {View, Text, FlatList} from "react-native";
import realm from '../schemas/InventoryDatabase';

export default class ViewInventory extends React.Component {
    constructor(props) {
      super(props);
      // 一次性初始化所有状态
      this.state = {
        inventories: realm.objects('Inventories'),
        ingredients: realm.objects('Ingredients'),
      };
    }

    ListViewItemSeparator = () => {
      return (
        <View style={{ height: 0.5, width: '100%', backgroundColor: '#000' }} />
      );
    };    

    render() {                                    
      return (
        <View>                
          <FlatList
            data={this.state.inventories}
            ItemSeparatorComponent={this.ListViewItemSeparator} 
            keyExtractor={(item) => item.recordID.toString()} // 使用唯一ID作为key，比index更可靠
            renderItem={({ item }) => (                           
              <View style={{ backgroundColor: 'white', padding: 20 }}>
                <Text>Inventory ID: {item.recordID}</Text>
                <Text>Name: {item.inventoryName}</Text>
                <Text>Date: {item.date}</Text>
                {/* 提前过滤当前库存对应的食材，避免全量遍历 */}
                <FlatList
                  data={this.state.ingredients.filter(ing => ing.inventoryID === item.recordID)}
                  ItemSeparatorComponent={this.ListViewItemSeparator} 
                  keyExtractor={(ingItem) => ingItem.ingredientID.toString()}
                  renderItem={({ item: ingItem }) => (
                    <View style={{ backgroundColor: 'gray', padding: 20 }}>
                      <Text>Ingredient ID: {ingItem.ingredientID}</Text>
                      <Text>Ingredient Type: {ingItem.ingredientType}</Text>
                      <Text>Ingredient: {ingItem.ingredient}</Text>
                    </View>
                  )}
                />
              </View>                                  
            )}              
          />
       </View> 
      );
    }
}

关键优化点说明 #

• 状态初始化：合并所有状态赋值为一次，确保两个数据源都被正确存入state。
• 数据提前过滤：内层FlatList使用filter提前筛选出当前库存对应的食材，减少不必要的渲染，同时避免无返回值的情况。
• Key优化：使用数据对象的唯一ID（如recordID、ingredientID）作为keyExtractor的返回值，比使用index更稳定，避免列表更新时的渲染异常。
• Realm数据直接使用：直接将Realm集合对象作为FlatList的data，利用Realm的实时更新特性，数据变化时列表会自动刷新。

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