滑动另一个元素时第一个索引隐藏项目未隐藏 - 滑动器 FlatList React native

Question

正如您在图片中看到的，我已经实现了通过按下按钮动态添加文本输入，一切正常，只有第一个文本输入隐藏项（删除按钮）在滑动其他文本输入时没有隐藏。

const initialState = {
  col1: '',
  key: 0,
};
const [inputField, setInputField] = useState<Values[]>([initialState]);

<SwipeListView
            data={inputField}
            renderItem={data => renderItem(data)}
            renderHiddenItem={data => renderHiddenItem(data)}
            leftOpenValue={55}
            rightOpenValue={-100}
            disableRightSwipe={true}
            ListHeaderComponent={
              <View style={[styles.headingContainer]}>
                <Text style={[styles.headingText]}>{Props.inputHeading}</Text>
              </View>
            }
            ListFooterComponent={
              <View style={styles.buttonContainer}>
                <TouchableOpacity
                  style={styles.addBtn}
                  activeOpacity={0.7}
                  onPress={onPressAddBtn}>
                  <Text style={styles.BtnText}>Add</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.submitBtn} activeOpacity={0.7}>
                  <Text style={styles.BtnText}>Submit</Text>
                </TouchableOpacity>
              </View>
            }
            style={{height: Dimensions.get('screen').height / 1.3}}
          />

const renderItem = (data: any) => {
    return (
      <TouchableHighlight key={data.item.key}>
        <TextInput
          placeholder="Hello"
          onChangeText={e => handleChange(data.item.key, 'col1', e)}
          value={data.item.col1}
          style={[styles.textInput, Props.textInputStyle]}
          // {...Props.textInputProps}
        />
      </TouchableHighlight>
    );
  };

  const renderHiddenItem = (rowData: any) => {
    return (
      <View
        style={{
          justifyContent: 'flex-end',
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <TouchableOpacity
          activeOpacity={0.7}
          style={{
            backgroundColor: 'red',
            justifyContent: 'center',
            flexDirection: 'row',
            width: 90,
            height: 45,
            alignItems: 'center',
            borderRadius: 5,
          }}>
          <Text style={{color: 'white'}}>Remove</Text>
        </TouchableOpacity>
      </View>
    );
  };

但其他所有元素的滑动都按预期工作，只有第一个元素没有按预期工作

Answer 1

通过将 keyExtractor={item => item.key.toString()} 添加到 swiper flatlist 找到解决方案。