Nested Flat List Invariant Violation: A Virtualize

问题:

Error: Invariant Violation: A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.

So I am trying to make A FlatList which will have Multiple Nested FlatLists Like this..

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

The Code Snippet For this:

       {/* 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  ---------------------------------------------------- */}

Example of the Data The Parent FlatList is given.

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"
              },
            ]
          }
        ]
      }
    ]
  },

];

You see, there are two FlatLists At Each Level. If I comment out one of them (The upper one with no Child FlatLists.) the Code runs without any error. I think it is something related to keyExtractors of sibling FlatLists.

回答1:

Please follow this. instead of keyExtractor i used lisKey.That works for me.

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

回答2:

// unique listKey

<FlaList>
  <FlaList listKey="1.1" />
  <FlaList listKey="1.2" />
</FlaList>
<FlaList>
  <FlaList listKey="2.1" />
  <FlaList listKey="2.2" />
</FlaList>