如何使用 React Native 在 SectionList 中停止 FlatList 的多次重复答案

【问题标题】：How to Stop Multiple Repeating of FlatList in SectionList using React Native如何使用 React Native 在 SectionList 中停止 FlatList 的多次重复
【发布时间】：2021-06-30 13:02:14
【问题描述】：

我在 SectionList 中使用 FlatList，但我的行重复了多次。我已将数据存储在两种状态中，并在 SectionList 和 FlatList 中使用条件获取其值。请帮我。谢谢。

Output Screen

    <SectionList
                  ItemSeparatorComponent={FlatListItemSeparator}
                  sections={[
                    { title: 'Dishes', data: cates },
                    { title: 'Restaurants', data: users },
                  ]}
                  renderSectionHeader={({ section }) => (
                    <Text style={{ fontWeight: 'bold', color: '#dc3545', fontSize: 20, paddingVertical: 5 }}>
                      {section.title}
                    </Text>
                  )}
                  renderItem={({ item }) => (
                    // Item for the FlatListItems
                    <View>
                      {
                        item.catIcon ?
                          <FlatList
                            data={cates}
                            style={{ backgroundColor: '#fff', paddingTop: 5, borderRadius: 6, paddingBottom: 10 }}
                            numColumns={4}
                            renderItem={({ item }) => (
                                <Text>{item.catName}</Text>
                            )}
                          />
                          :
<Text>{item.RName}</Text>
                      }
                    </View>
                  )}
                  keyExtractor={(item, index) => index}
                />

【问题讨论】：

为什么在 renderItem 中使用 FlatList？
Bcz 没有 FlatList 它在单列中垂直重复。你能帮帮我吗？
看看这个stackoverflow.com/questions/47833581/…
stackoverflow.com/questions/47833581/…

标签： react-native react-native-flatlist

【解决方案1】：

在您的 flatList 中，您使用了错误的数据，当每个部分应该依赖于该部分时，您为每个部分提供了相同的数组，请尝试以下操作：

                  renderItem={({ item }) => (
                    // Item for the FlatListItems
                    <View>
                      {
                        item.catIcon ?
                          <FlatList
                            data={item.data} // <---- CHANGE THIS ROW
                            style={{ backgroundColor: '#fff', paddingTop: 5, borderRadius: 6, paddingBottom: 10 }}
                            numColumns={4}
                            renderItem={({ item }) => (
                                <Text>{item.catName}</Text>
                            )}
                          />
                          :
                       <Text>{item.RName}</Text>
                      }
                    </View>
                  )}

【讨论】：