删除数组项反应本机移动项位置

Question

好的，也许标题不是很清楚，所以让我解释一下。

我可以将图像添加到阵列中并显示它们，在屏幕上拖放accros。现在是问题了。

例如，我在阵列中有3个图像，将它们放置在屏幕上的不同位置。当我删除图像2时(确实被删除了(，但图像3被移动到原始图像2的位置，而它应该保持在自己的位置。

我该怎么做？

这是我使用的代码：

import StageGesture from '../components/stageGesture';
const [ finalArray, setFinalArray ] = useState([]);
const onRemove = ({ item }) => {
let imgName = item.imagetitle;
const newFinalArray = finalArray.filter(finalItem =>  finalItem.imagetitle !== imgName);
setFinalArray(newFinalArray);
setArrayLength(newFinalArray);
};
return (
<View style={{ flex: 1,backgroundColor:'white' }}>
{finalArray.map((item, i) =>  (
// setArrayLength(item.length),
// console.log('item', item),
<StageGesture id={item.key} xval={item.valX} yval={item.valY} imagetitle={item.imagetitle} stageimage={item.stageimage} parent={id} onPress={() => onRemove({item})} />
))}
</View>
)

舞台手势文件：

import React, { useState, useCallback, useEffect, createRef, useRef } from 'react';
import { 
TouchableHighlight, 
Animated,
PanResponder,
} from 'react-native';
import { Image } from 'react-native-elements';
import ContextMenu from 'react-native-context-menu-view';
import firestore from '@react-native-firebase/firestore';
const stagesRef = firestore().collection('stages');
const StageGesture = ({id, imagetitle, stageimage, xval, yval, onPress, parent}) => {
const [ contextMenuOpen, setConextMenuOpen ] = useState(false);
const [ img, setImg ] = useState('');
const [ imgTitle, setImgTitle ] = useState('');
const [ x, setX ] = useState(0);
const [ y, setY ] = useState(0);
useEffect(() => {
setImg(stageimage);
setImgTitle(imagetitle);
}, []);
const pan = useState(new Animated.ValueXY({x: xval, y: yval}))[0];
const panResponder = useState(
PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
pan.setOffset({
x: pan.x._value,
y: pan.y._value
});
pan.setValue({x: xval, y: yval});
},
onPanResponderMove: Animated.event(
[
null,
{ dx: pan.x, dy: pan.y }
],
{useNativeDriver: false}
),
onPanResponderRelease: () => {
pan.flattenOffset();
stagesRef.doc(parent).collection('stageimages').doc(id)
.update({
x: pan.x._value,
y: pan.y._value,
}).then(function() {

});
}
})
)[0];
return (
<Animated.View
key={id}
style={{
transform: [{ translateX: pan.x }, { translateY: pan.y }],
alignSelf: 'flex-start',
// position: 'absolute',
elevation: 2 
// left: 20, 
// top: 40
}}
{...panResponder.panHandlers}
>
<ContextMenu actions={[
{
title: `Delete ${imgTitle}`,
systemIcon: 'trash',
destructive: true,
},
]} onPress={onPress}>
<TouchableHighlight onLongPress={() => setConextMenuOpen(true)} activeOpacity={0.7} underlayColor="transparent">
<Image source={stageimage} style={{height: 100,width: 100}} resizeMode='contain' />
</TouchableHighlight>
</ContextMenu>
</Animated.View>
);
}
export default StageGesture

Answer 1

const newFinalArray = finalArray.filter(finalItem =>  finalItem.imagetitle !== imgName);

当您使用filter时，您正在创建一个新的数组，因此在这种情况下，您需要使用map而不是filter来用NULL替换元素。

const newFinalArray = finalArray.map(finalItem =>finalItem.imagetitle !== imgName ? finalItem : null);

并在渲染时间检查如下：

return (
<View style={{ flex: 1,backgroundColor:'white' }}>
{finalArray.map((item, i) =>  {
return item ? <StageGesture id={item.key} xval={item.valX} yval={item.valY} imagetitle={item.imagetitle} stageimage={item.stageimage} parent={id} onPress={() => onRemove({item})} /> : <EmptyImage>
...

您也可以使用它将替换的delete删除数组元素元素与undefined或null(测试它(。