英文:
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, ScrollView
s should never be nested. Consider using map
instead of your second FlatList
.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论