React Native FlatList渲染组件间出现多余空白间距问题排查

问题描述 #

我在React Native应用中通过FlatList实现点击“+”按钮新增组件的功能，该逻辑在其他页面可正常运行，但当前页面里，组件与加号按钮之间会出现随机空白，且点击加号次数越多，间距越大。

相关代码 #

状态定义 #

const [numWorkouts, setNumWorkouts] = useState([1]);

加号按钮点击逻辑 #

<TouchableOpacity
          style={tailwind("w-[100%] items-center")}
          onPress={() => {
            setNumWorkouts(numWorkouts => [...numWorkouts, numWorkouts.length]);
          }}
        >

useEffect 与初始化函数 #

useEffect(() => { updateNumWorkouts()}, []);

const updateNumWorkouts = newWorkout => {
    let s = newWorkout === undefined ? 1 : newWorkout;
    let tempArr = [];
    for (var i = 0; i < s; i++) {
      tempArr.push(i);
    }
    setNumWorkouts(tempArr);
  };

FlatList 渲染逻辑 #

<FlatList
        data={numWorkouts}
        renderItem={({ item, index }) => {
          return <LoggingComponent index={index} updateArr={addWeight} pushWID={pushWID}/>;
        }}
      />

异常表现 #

• 点击一次加号后，组件与按钮间出现明显间距
• 组件下方存在多余空白区域
• 点击加号次数越多，组件间的空白间距越大

内容的提问来源于stack exchange，提问作者Srikar