Javascript 从滑块删除图像不会'；我什么也没表现出来

我正在使用。Slider可以完美地处理图像数组。我想在特定索引处滑动时删除特定图像。假设在滑动多个图像之后，我在索引6，现在我想删除索引6中可用的图像。当我使用javascript拼接方法删除并在删除后使用更新的数组设置状态时，我无法在滑块中看到任何内容。有人能帮我吗

多谢各位

我的组件删除功能代码：-

var newArray=[];
newArray=
this.state.imageFlatlist.splice(index, 1) &&  this.state.imageFlatlist;
    this.setState({
                imageFlatlist : newArray,
                isImageDeleted:true

    })

我的渲染代码：-

<ImageSlider images={this.state.imageFlatlist} onPositionChanged={position => 
     this._currentImagePosition(position)} style={{ flex: 1, }}

this._currentImagePosition（position）}style={{{flex:1，}}

这是插件代码：-

_move(index) {
        console.log("movein to index:- " ,index);
        const width = Dimensions.get('window').width;
        const to = index * -width;
        if (!this.state.scrolling) {
            return;
        }
        Animated.spring(this.state.left, {toValue: to, friction: 10, tension: 50}).start();
        if (this.state.timeout) {
            clearTimeout(this.state.timeout);
        }
        this.setState({position: index, timeout: setTimeout(() => {
            this.setState({scrolling: false, timeout: null});
            if (this.props.onPositionChanged) {
                this.props.onPositionChanged(index);
            }
        }, 500)});
    }

    _getPosition() {
        if (typeof this.props.position === 'number') {
            return this.props.position;
        }
        return this.state.position;
    }

    componentWillReceiveProps(props) {
        if (props.position !== undefined) {
            this.setState({scrolling: true});
            this._move(props.position);
        }
    }

    componentWillMount() {
        alert("Hey");
        const width = Dimensions.get('window').width;

        if (typeof this.props.position === 'number') {
            this.state.left.setValue(-(width * this.props.position));
        }

        let release = (e, gestureState) => {
            const width = Dimensions.get('window').width;
            const relativeDistance = gestureState.dx / width;
            const vx = gestureState.vx;
            let change = 0;
            console.log("relative Distance:- " , relativeDistance);
            console.log("**VX**" , vx);

            if (relativeDistance < -0.5 || (relativeDistance < 0 && vx <= 0.5)) {
                change = 1;
            } else if (relativeDistance > 0.5 || (relativeDistance > 0 && vx >= 0.5)) {
                change = -1;
            }
            const position = this._getPosition();
            console.log("Position:-   " , position);
            if (position === 0 && change === -1) {
                change = 0;
            } else if (position + change >= this.props.images.length) {

                change = (this.props.images.length) - (position + change);
            }
            this._move(position + change);
            return true;
        };

        this._panResponder = PanResponder.create({
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => Math.abs(gestureState.dx) > 5,
            onPanResponderRelease: release,
            onPanResponderTerminate: release,
            onPanResponderMove: (e, gestureState) => {

                const dx = gestureState.dx;
                const width = Dimensions.get('window').width;
                const position = this._getPosition();
                let left = -(position * width) + Math.round(dx);
                if (left > 0) {
                    left = Math.sin(left / width) * (width / 2);
                } else if (left < -(width * (this.props.images.length - 1))) {
                    const diff = left + (width * (this.props.images.length - 1));
                    left = Math.sin(diff / width) * (width / 2) - (width * (this.props.images.length - 1));
                }
                this.state.left.setValue(left);
                if (!this.state.scrolling) {
                    this.setState({scrolling: true});
                }
            },
            onShouldBlockNativeResponder: () => true
        });
    }

    componentWillUnmount() {
        if (this.state.timeout) {
            clearTimeout(this.state.timeout);
        }
    }

    render() {
        const customStyles = this.props.style ? this.props.style : {};
        const width = Dimensions.get('window').width;
        const height = this.props.height || this.state.height;
        const position = this._getPosition();

        return (<View>
            <Animated.View
                style={[styles.container, customStyles, {height: height, width: width * this.props.images.length, transform: [{translateX: this.state.left}]}]}
                {...this._panResponder.panHandlers}>
                    {this.props.images.map((image, index) => {
                    console.log("image in lib ***" , this.props.images);
                    console.log("**lib index***"  ,  index);

                        const imageComponent = <Image
                                                key={index}
                                                source={{uri: image}}
                                                style={{height: position === index || this.state.scrolling ? height : 0, width}}
                                              />;
                    return imageComponent;


                    })}
            </Animated.View>
            {/* <View style={styles.buttons}>
                {this.props.images.map((image, index) => {
                    return (<TouchableHighlight
                        key={index}
                        underlayColor="#ccc"
                        onPress={() => {
                            this.setState({scrolling: true});
                            return this._move(index);
                        }}
                        style={[styles.button, position === index && styles.buttonSelected]}>
                            <View></View>
                    </TouchableHighlight>);
                })}
            </View> */}
        </View>);
    }

\u移动（索引）{
log（“移动到索引：-”，索引）；
const width=Dimensions.get（'window'）.width；
常数to=索引*-宽度；
如果（！this.state.scrolling）{
返回；
}
spring（this.state.left，{toValue:to，摩擦力：10，张力：50}）；
if（this.state.timeout）{
clearTimeout（this.state.timeout）；
}
this.setState（{位置：索引，超时：setTimeout（（）=>{
this.setState（{滚动：false，超时：null}）；
如果（此道具位置已更改）{
此.props.onposition已更改（索引）；
}
}, 500)});
}
_getPosition（）{
if（typeof this.props.position==“number”）{
返回此.props.position；
}
返回此.state.position；
}
组件将接收道具（道具）{
如果（道具位置！==未定义）{
this.setState（{scrolling:true}）；
这个动作（道具位置）；
}
}
组件willmount（）{
警惕（“嘿”）；
const width=Dimensions.get（'window'）.width；
if（typeof this.props.position==“number”）{
this.state.left.setValue（-（宽度*this.props.position））；
}
让释放=（e，手势状态）=>{
const width=Dimensions.get（'window'）.width；
const relativeDistance=gestureState.dx/宽度；
const vx=gestureState.vx；
让变化=0；
console.log（“相对距离：-”，相对距离）；
控制台日志（“**VX**”，VX）；
如果（相对距离<-0.5 | | |（相对距离<0&&vx 0.5 | |（相对距离>0&&vx>=0.5））{
变化=-1；
}
const position=this._getPosition（）；
控制台日志（“位置：-”，位置）；
如果（位置===0&&change===-1）{
变化=0；
}else if（position+change>=this.props.images.length）{
更改=（this.props.images.length）-（位置+更改）；
}
这个。_移动（位置+改变）；
返回true；
};
这是.\u panResponder=panResponder.create({
onMoveShouldSetPanResponderCapture:（evt，gestureState）=>Math.abs（gestureState.dx）>5，
onPanResponderRelease:发布，
onPanResponderTerminate:释放，
onPanResponderMove：（e，手势状态）=>{
const dx=gestureState.dx；
const width=Dimensions.get（'window'）.width；
const position=this._getPosition（）；
设左=-（位置*宽度）+数学圆（dx）；
如果（左>0）{
左=数学sin（左/宽）*（宽/2）；
}否则如果（左<-（宽度*（this.props.images.length-1）））{
const diff=left+（width*（this.props.images.length-1））；
左=Math.sin（diff/width）*（width/2）-（width*（this.props.images.length-1））；
}
this.state.left.setValue（左）；
如果（！this.state.scrolling）{
this.setState（{scrolling:true}）；
}
},
onShouldBlockNativeResponder:（）=>true
});
}
组件将卸载（）{
if（this.state.timeout）{
clearTimeout（this.state.timeout）；
}
}
render（）{
const customStyles=this.props.style？this.props.style:{}；
const width=Dimensions.get（'window'）.width；
const height=this.props.height | | this.state.height；
const position=this._getPosition（）；
返回(
{this.props.images.map（（图像，索引）=>{
log（“库中的图像***”，this.props.images）；
console.log（“**lib index***”，index）；
常量imageComponent=；
返回图像组件；
})}
{/* 
{this.props.images.map（（图像，索引）=>{
报税表（{
this.setState（{scrolling:true}）；
返回此。\u移动（索引）；
}}
样式={[styles.button，position==索引和样式.buttonSelected]}>
);
})}
*/}
);
}

问题在于滑块代码中的这一行：

{this.props.images.map（（image，index）=>…

似乎不打算动态更新图像，因为在React props中，状态不会更改，因此在这种情况下使用。我建议您只需在状态中添加

images

属性即可重写代码

export default class ImageSlider extends Component {
    constructor(props) {
        super(props);

        this.state = {
            images: [], // <-----------
            position: 0,
            height: Dimensions.get('window').width * (4 / 9),
            width: Dimensions.get('window').width,
            scrolling: false,
        };
    }
    ...

最后像这样在渲染中使用它们

{this.state.images.map((image, index) => ...

编辑 如何不可变地拼接阵列：

在顶部，从“lodash”导入

const newArray = _.remove(this.state.imageFlatlist, (image, i) => i == index);

---

滑块代码中的这一行存在问题：

{this.props.images.map（（image，index）=>…

似乎不打算动态更新图像，因为在React props中，状态不会更改。我建议您通过sim重写代码

const newArray = _.remove(this.state.imageFlatlist, (image, i) => i == index);