我正在努力让我的多维数组在我的 React Native 应用程序中渲染(旁注:使用 Expo 在我的手机上进行模拟)。
我希望让它迭代并显示多数组中所有项目的
title
值。
我尝试遵循以下逻辑链接:https://stackoverflow.com/a/72518868/3658694,但我仍然在努力渲染多数组数据(这可能是一个小问题)。
请参阅下面我的
Flatlist
组件,我在逻辑上遇到了困难。
数据
const DATAARRAY = [
{
sdata: [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'One',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Two',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Three',
},
{
id: 'bd7acwea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'Four',
},
{
id: '3ac62afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Five',
},
{
id: '58692a0f-3da1-471f-bd96-145571e29d72',
title: 'Six',
},
]
}
];
‘Item’组件(渲染标题文本的显示块)
//Item component
const Item = ({ title }) => (
<View>
<Text>{title}</Text>
</View>
);
Flatlist(应用程序组件)
//Flatlist rendered
< FlatList style={styles.flatList}
data={DATAARRAY}
keyExtractor={item => 'sdata'}
renderItem={({ item }) => (
< FlatList
data={item}
keyExtractor={item => item.id}
renderItem={({ item }) => <Item title={item.title} />}
/>
)}
/>
为了更清晰的说明,我在这里删除了所有其他编码。
(弄清楚这一点后,我相当有信心从数据库查询结果中操作多数组结构,以同样的方式替换上面的测试数据数组)
sdata
属性是嵌套数组,因此嵌套FlatList
应该使用它作为数据。
<FlatList
data={DATAARRAY}
renderItem={({ item }) => (
<FlatList
data={item.sdata}
...
/>
)}
/>