react-native - 嵌套平面列表不变违规 : A VirtualizedList contains a cell which itself contains more than one VirtualizedList

Question

错误:不变违规:VirtualizedList 包含一个单元格，该单元格本身包含多个与父列表方向相同的 VirtualizedList。您必须将唯一的 listKey 属性传递给每个同级列表。

所以我正在尝试制作一个 FlatList，它将有多个像这样的嵌套 FlatList..

1------FlaList Level 0
    1.1-----FlatList Level 1
    1.2-----FlatList Level 1
         1.2.1------ FlatList Level 2
         1.2.2------ FlatList Level 2
2------FlatList Level 0
    2.1-----FlatList Level 1
    2.2-----FlatList Level 1
            2.2.1------ FlatList Level 2
            2.2.2------ FlatList Level 2

代码片段:

       {/* Flat List Level 0 ---------------------------------------------------- */}

          <FlatList
            style={{ flex: 1, marginVertical: 8 }}
            data={this.state.meeting_topic_list}
            renderItem={({ item, index }) => (
              <View style={{ flex: 1, marginLeft: 8 }}>
                <Text style={{ fontSize: 12, color: "black", fontWeight: "600", marginBottom: 8 }}>{index + 1} {item.title}</Text>
                 {/* Nested Item Level 1---------------------------- */}
                <FlatList
                  data={item.docs}
                  Horizontal={true}
                  style={{ marginLeft: 12 }}
                  renderItem={({ item, index }) => (
                    <View style={{ flex: 1, marginLeft: 8, }}>
                      <Image source={require("./images/docs.png")} style={{ height: 30, width: 30 }} />
                      <Text style={{ fontSize: 12, color: "black", marginBottom: 8, marginLeft: 8 }} onPress={() => {
                        return <WebView
                          source={{ uri: item.url }}
                          style={{ marginTop: 20 }}
                        />
                      }}>{index + 1} {item.text}</Text>
                    </View>
                  )}
                  keyExtractor={(item, index) => index}
                />
                {/* Nested Item Level 1---------------------------- */}
                <FlatList
                  style={{ flex: 1, marginVertical: 8 }}
                  data={item.subItems}
                  renderItem={({ item, index }) => (
                    <View style={{ flex: 1, marginLeft: 8 }}>
                      <Text style={{ fontSize: 12, color: "black", fontWeight: "600", marginBottom: 8 }}>{index + 1} {item.title}</Text>
                      {/* Nested Item Level 2---------------------------- */}
                      <FlatList
                        data={item.docs}
                        style={{ marginLeft: 12 }}
                        renderItem={({ item, index }) => (
                          <View style={{ flex: 1, marginLeft: 8, }}>
                            <Image source={require("./images/docs.png")} style={{ height: 30, width: 30 }} />
                            <Text style={{ fontSize: 12, color: "black", marginBottom: 8, marginLeft: 8 }} onPress={() => {
                              return <WebView
                                source={{ uri: item.url }}
                                style={{ marginTop: 20 }}
                              />
                            }}>{index + 1} {item.text}</Text>
                          </View>
                        )}
                        keyExtractor={(item, index) => index}
                      />
                      {/* Nested Item Level 2---------------------------- */}
                      <FlatList
                        style={{ flex: 1, marginVertical: 8 }}
                        data={item.subItems}
                        renderItem={({ item, index }) => (
                          <View style={{ flex: 1, marginLeft: 8 }}>
                            <Text style={{ fontSize: 12, color: "black", fontWeight: "600", marginBottom: 8 }}>{index + 1} {item.title}</Text>
                            <FlatList
                              data={item.docs}
                              style={{ marginLeft: 12 }}
                              renderItem={({ item, index }) => (
                                <View style={{ flex: 1, marginLeft: 8, flexDirection: "row", justifyContent: "center", alignItems: "center" }}>
                                  <Image source={require("./images/docs.png")} style={{ height: 30, width: 30 }} />
                                  <Text style={{ fontSize: 12, color: "black", marginBottom: 8, marginLeft: 8 }} onPress={() => {
                                    return <WebView
                                      source={{ uri: item.url }}
                                      style={{ marginTop: 20 }}
                                    />
                                  }}>{index + 1} {item.text}</Text>
                                </View>
                              )}
                              keyExtractor={(item, index) => index}
                            />
                            <View style={{ borderBottomWidth: .5, borderBottomColor: "#e2e2e2", marginVertical: 8, marginRight: 8 }} />
                          </View>
                        )}
                        keyExtractor={(item, index) => index}
                      />
                      {/* Nested FlatList end Level 2---------------------*/}
                      <View style={{ borderBottomWidth: .5, borderBottomColor: "#e2e2e2", marginVertical: 8, marginRight: 8 }} />
                    </View>
                  )}
                  keyExtractor={(item, index) => index}
                />
                {/* Nested FlatList END Level 1---------------------*/}
                <View style={{ borderBottomWidth: .5, borderBottomColor: "#e2e2e2", marginVertical: 8, marginRight: 8 }} />
              </View>
            )}
            keyExtractor={(item, index) => index}
          />
          {/* Flat List END Level 0  ---------------------------------------------------- */}

给出了父 FlatList 的数据示例。

var meetingTopicData = [
  {
    title: "test title frt6",
    docs: [
      {
        text: "Document Name",
        url: "https://dummy.com"
      },
      {
        text: "Document Name",
         url: "https://dummy.com"
      },
    ],
    subItems: [
      {
        title: "test title frt6",
        docs: [
          {
            text: "Document Name",
             url: "https://dummy.com"
          },
          {
            text: "Document Name",
             url: "https://dummy.com"
          },
        ],
        subItems: [
          {
            title: "test title frt6",
            docs: [
              {
                text: "Document Name",
                url: "https://dummy.com"
              },
              {
                text: "Document Name",
                 url: "https://dummy.com"
              },
            ]
          },
          {
            title: "test title frt6",
            docs: [
              {
                text: "Document Name",
                 url: "https://dummy.com"
              },
              {
                text: "Document Name",
                 url: "https://dummy.com"
              },
            ]
          },
          {
            title: "test title frt6",
            docs: [
              {
                text: "Document Name",
               url: "https://dummy.com"
              },
              {
                text: "Document Name",
                 url: "https://dummy.com"
              },
            ]
          }
        ]
      }
    ]
  },

];

你看，每个级别都有两个 FlatList。如果我注释掉其中之一(上面的一个没有子 FlatLists。)，代码运行时不会出现任何错误。我认为这与同级 FlatLists 的 keyExtractors 有关。

Answer 1

请遵循此。我使用 lisKey 而不是 keyExtractor。这对我有用。

<FlatList

columnWrapperStyle={{margin: 5}}

data={this.state.productDetails.configurations}

numColumns={4}

listKey={(item, index) => 'D' + index.toString()}

renderItem={({item}) => (
    <View style={styles.inputsContainer}>

        <TouchableHighlight style={styles.fullWidthButton} onPress={() => 

            this.selectProduct(item)}>

            <Text style={styles.fullWidthButtonText}>{item.name}</Text>  

        </TouchableHighlight>

        <FlatList

            data={item.details}

            listKey={(item2, index) => 'D' + index.toString()}

            renderItem = {({item2}) => (

                <View><Text>Hello</Text></View>
            )}

        />

    </View>
)}
/>