修复此 React Native 错误 VirtualizedList contains a cell which itself contains more than one VirtualizedList

Question

当我加载我的 React Native 项目时，出现此错误：

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.

我该如何解决？

错误显示：

代码：

const Home = () => {
    
    function renderRecentEvent() {
        return (
                    <FlatList 
                        data = {recentData}
                        lisKey = {item => item.id}
                        showsVerticalScrollIndicator = {false}  
                        renderItem={({item}) => {
                            return (
                                <View>
                                    <Text>{ item.event_name }</Text>  
                                </View>
                            )
                        }}                         
                    />
        )
    }


    function renderMonthEvent() {
        return (
                    <FlatList 
                        data = {todayData}
                        lisKey = {item => item.id}
                        showsVerticalScrollIndicator = {false}  
                        renderItem={({item}) => {
                            return (
                                <View>
                                    <Text>{ item.event_info }</Text>  
                                </View>
                            )
                        }}                         
                    />
        )
    }


    return (
        <View>
                <FlatList 
                    data = {eventData}
                    keyExtractor = {item => item.id}
                    keyboardDismissMode = 'on-drag'
                    showsVerticalScrollIndicator = {false}
                    ListHeaderComponent = {
                        <View>
                            {renderRecentEvent()}

                            {/* --------- Month Event  --------- */}
                            {renderMonthEvent()}                 
                        </View>
                    }
                    renderItem = { ({item}) => {
                        return (
                            <CategoryCard 
                                categoryItem={item}
                            />
                        )
                    }}
                    ListEmptyComponent = {
                        <View 
                            style = {{ marginBottom: 100 }}
                        />
                    }
                />
        </View>
    )

}

Answer 1

如错误所述“您必须将唯一的 listkey 属性传递给每个兄弟列表”。

If there are multiple VirtualizedLists at the same level of nesting within another VirtualizedList, this key is necessary for virtualization to work properly.

例如：

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

更新

在你的例子中，你的道具名称有错别字。你必须写 listkey 而不是 lisKey.

const Home = () => {
  function renderRecentEvent() {
    return (
      <FlatList
        data={recentData}
        listKey="recent-event"
        keyExtractor={item => item.id}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => {
          return (
            <View>
              <Text>{item.event_name}</Text>
            </View>
          );
        }}
      />
    );
  }

  function renderMonthEvent() {
    return (
      <FlatList
        data={todayData}
        listKey="month-event"
        keyExtractor={item => item.id}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => {
          return (
            <View>
              <Text>{item.event_info}</Text>
            </View>
          );
        }}
      />
    );
  }

  return (
    <View>
      <FlatList
        data={eventData}
        keyExtractor={item => item.id}
        keyboardDismissMode="on-drag"
        showsVerticalScrollIndicator={false}
        ListHeaderComponent={
          <View>
            {renderRecentEvent()}
            {renderMonthEvent()}
          </View>
        }
        renderItem={({ item }) => {
          return <CategoryCard categoryItem={item} />;
        }}
        ListEmptyComponent={<View style={{ marginBottom: 100 }} />}
      />
    </View>
  );
};