Flatlist不显示 – 嵌套Flatlists

huangapple go评论74阅读模式
英文:

Flatlist Does Not Appear - Nested Flatlists

问题

我试图嵌套一个Flatlist。我使用了两个Realm对象数组,并需要根据“inventories”数组中的一个值来有条件地显示“ingredients”数组中的项目。

我在想我的“return语句”是否放错了地方,或者我的逻辑是否有误。请给予建议。任何帮助将不胜感激。谢谢。

英文:

I am attempting to nest a Flatlist. I am using two Realm object arrays and need to conditionally display items from the "ingredients" array based on a value within the "inventories" array.

I am wondering if I have my "return statements" placed incorrectly or whether my logic is skewed. Please advise. Any help would be much appreciated. Thank you.

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 = {
        FlatListInventoryItems: [],
      };  
      this.state = {
        FlatListIngredientItems: [],
      };
      var inventories = Object.values(realm.objects('Inventories'));
      var ingredients = Object.values(realm.objects('Ingredients'));      
      this.state = {
        FlatListInventoryItems: inventories,
      };
      this.state = {
        FlatListIngredientItems: ingredients,
      };
    }
    ListViewItemSeparator = () => {
      return (
        <View style={{ height: 0.5, width: '100%', backgroundColor: '#000' }} />
      );
    };    
    render() {                                    
      return (
        <View>                
          <FlatList
            data={this.state.FlatListInventoryItems}
            ItemSeparatorComponent={this.ListViewItemSeparator} 
            keyExtractor={(item, index) => index.toString()}           
            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.FlatListIngredientItems}
                  ItemSeparatorComponent={this.ListViewItemSeparator} 
                  keyExtractor={(item2, index) => index.toString()}           
                  renderItem={({ item2 }) => {
                    if (item2.inventoryID == item.recordID) {
                      return (
                        <View style={{ backgroundColor: 'gray', padding: 20 }}>
                          <Text>Ingredient ID: {item2.ingredientID}</Text>
                          <Text>Ingredient Type: {item2.ingredientType}</Text>
                          <Text>Ingredient: {item2.ingredient}</Text>
                        </View>
                      );
                    }
                  }}
                />
              </View>                                  
            )}             
          />
       </View> 
      );
    }
}

答案1

得分: 1

一切看起来都没问题。

但是,ScrollView不应该嵌套使用。 考虑使用 map 替代你的第二个 FlatList

英文:

Everything looks ok.

However, ScrollViews should never be nested. Consider using map instead of your second FlatList.

huangapple
  • 本文由 发表于 2023年2月19日 05:41:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/75496565.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定