ItemSeparatorComponent React Native

Question

所以，我在平面列表中使用分隔符。 我将分隔符链接到日志记录 function，它记录了平面列表中每个项目的键。 当我重新加载应用程序时，会记录前 10 个项目，然后是前 20 个，依此类推...实际上，每 10 个项目，迭代都会重新启动，并记录从头开始的所有项目。 但是，如果我只是保存代码，应用程序就会刷新，所有项目都会按我的预期只记录一次。

这是我的代码：

import React from 'react';
import { Text, View, StyleSheet, TextInput, FlatList } from 'react-native';
import { Constants } from 'expo';
import { useState} from "react";

export default function App() {
  const [reviews, setReviews] = useState([
    {key:'1'},
    {key:'2'},
    {key:'3'},
    {key:'4'},
    {key:'5'},
    {key:'6'},
    {key:'7'},
    {key:'8'},
    {key:'9'},
    {key:'10'},
    {key:'11'},
    {key:'12'},
    {key:'13'},
    {key:'14'},
    {key:'15'},
    {key:'16'},
    {key:'17'},
    {key:'18'},
    {key:'19'},
    {key:'20'},
    {key:'21'},
    {key:'22'},
    {key:'23'},

  ])
  const separator=(e)=>{
    console.log(e.leadingItem.key)
  }
  return (
      <View >
        <FlatList
          ItemSeparatorComponent={(e)=>separator(e)}
          data={reviews}
          renderItem={({item}) => (
            <Text>{item.key}</Text>
          )}
        />
        
      </View>
    )

}


});

这是重新加载应用程序时的日志

log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 11
log : 12
log : 13
log : 14
log : 15
log : 16
log : 17
log : 18
log : 19
log : 20
log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 11
log : 12
log : 13
log : 14
log : 15
log : 16
log : 17
log : 18
log : 19
log : 20
log : 21
log : 22

这是刷新应用程序时的日志

log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 11
log : 12
log : 13
log : 14
log : 15
log : 16
log : 17
log : 18
log : 19
log : 20
log : 21
log : 22

这种行为是可以避免的吗？ 如果不是，这种行为会在生产模式下持续存在吗？

Answer 1

如果你想在每隔一组项目之间渲染 ItemSeparatorComponent，而不是每 10 个项目，你可以使用传递给 ItemSeparatorComponent 的 itemIndex 属性来确定何时渲染分隔符。 例如，您可以使用以下代码在每组其他项目之间呈现 ItemSeparatorComponent：

 function MyItemSeparator({ itemIndex }) { if (itemIndex % 20 === 0) { return <View style={styles.separator} />; } return null; }

此代码将在列表中每第 20 个项目之间（即第 0 个项目、第 20 个项目、第 40 个项目等）呈现 ItemSeparatorComponent。 您可以调整模数运算符 (%) 以更改呈现分隔符的频率。