React Native 嵌套数组在视图中渲染

问题描述 投票:0回答:1

我正在努力让我的多维数组在我的 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} />}
    />
  )}
/>

为了更清晰的说明,我在这里删除了所有其他编码。

(弄清楚这一点后,我相当有信心从数据库查询结果中操作多数组结构,以同样的方式替换上面的测试数据数组)

arrays react-native multidimensional-array
1个回答
1
投票

sdata
属性是嵌套数组,因此嵌套
FlatList
应该使用它作为数据。

<FlatList
  data={DATAARRAY}
  renderItem={({ item }) => (
    <FlatList
      data={item.sdata}
...
    />
  )}
/>
© www.soinside.com 2019 - 2024. All rights reserved.