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

Question

我在 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}
                />

Answer 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>
                  )}