Question

<FlatList
          data={[
            {id: '1'},
            {name: 'snus'},
            {pris: '32'},
          ]}
          renderItem={({item}) => <View style={styles.item}>
                                    <Text>{item.pris}{item.name}{item.id}</Text>
                                  </View>}
/>

当我渲染这样的项目时，它们会得到正确的格式设置，并且每个视图都会显示为一个列表项：click here for visual confirmation。

但是，当我在每个JSX元素的前面添加描述性文本时，将为所有列表项like this呈现该文本。

代码：

renderItem={({item}) => <View style={styles.item}>
                         <Text>pris: {item.pris}</Text>
                        </View>}

我该如何从概念上解决这个问题？

Answer 1

您的renderItem道具

renderItem={({item}) => <View style={styles.item}>
                         <Text>pris: {item.pris}</Text>
                        </View>}

的格式正确。问题在于您要传递给FlatList的数据数组。每个项目都应该具有id，name和pris道具。相反，您将创建一个具有三个对象的数组，每个道具一次。我认为您的意图是给具有此结构的数组：

[{id: '1', name: 'snus', pris: '32'}, { id: '2', name: 'snus_2', pris: '23'}]

如何为每个FlatList项目呈现描述性文本？

1 个答案: