Question

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

所以我正在尝试制作一个具有多个嵌套FlatLists的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  ---------------------------------------------------- */}

数据示例给出了Parent 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"
              },
            ]
          }
        ]
      }
    ]
  },

];

你知道，每个级别都有两个FlatLists。如果我注释掉其中一个（上面一个没有Child FlatLists。）代码运行没有任何错误。我认为这与兄弟FlatLists的keyExtractors有关。

Answer 1

请关注此。而不是keyExtractor，我使用了lisKey。这对我有用。

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

Answer 2

// unique listKey

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

Answer 3

以下代码对我有用：

   <FlaList>
     <FlaList listKey={(item2, index) => 'A' + index.toString()}/>
     <FlaList listKey={(item2, index) => 'B' + index.toString()}/>
  </FlaList>
  <FlaList>
        <FlaList listKey={(item2, index) => 'C' + index.toString()}/>
      <FlaList listKey={(item2, index) => 'D' + index.toString()}/>
   </FlaList>

嵌套平面列表不变冲突：VirtualizedList包含一个单元，该单元本身包含多个VirtualizedList

3 个答案: