javascript - 取消选择不起作用

Question

我有 onSelectPhoto 函数，它允许用户选择照片并将它们存储在一个数组中，以便当用户单击“下一步？”按钮时在下一个屏幕上显示它们。我还有另一个函数是取消选择，它应该做相反的事情并让用户取消选择/切换照片。在这种情况下，取消选择功能不起作用。首先，如果取消选择它们，它不会让我选择我已经选择的照片。应该有选择同一张照片的选项，即使我取消选择它。另一个问题是它不允许我选择 5 张照片，因为它设置为我支持的长度。在取消选择的数组中运行的正确逻辑是什么？

onSelectedPhoto/onDeselectedPhoto:

onSelectPhoto = (photo, index) => {
        let photos = new Set([...this.selectedPhotos]);
        let len = this.selectedPhotosIndex;

        if (len > this.state.supportLength - 1) {
            this.limitDialog.open();
        }
        else if (len === (this.state.supportLength - 1)) {
            photos.add(photo);
            this.selectedPhotos = Array.from(photos);
            this.setState({selectedPhotos: this.selectedPhotos});
            this.props.setSelectedPhotos(len);
            this.selectedPhotosIndex = this.selectedPhotosIndex + 1;
        }
        else {
            this.selectedPhotosIndex = this.selectedPhotosIndex + 1;
            photos.add(photo);
            this.selectedPhotos = Array.from(photos);
        }
    }

    onDeselectPhoto = (photo, index) => {
        let photos = new Set([...this.selectedPhotos]);
        let len = this.selectedPhotosIndex;
        console.log('[...this.selectedPhotos]', [...this.selectedPhotos])

        photos.delete(photo);

        this.setState({selectedPhotos: Array.from(photos)});
        this.props.setSelectedPhotos(len);
        this.selectedPhotosIndex = this.selectedPhotosIndex - 1;
    }

我的构造函数：

constructor(props) {
    super(props);

    this.selectedPhotos = [];
    this.selectedPhotosIndex = 0;

    this.state = {
        photos: null,
        loader: {
            loading: 0,
            message: "Loading photos..."
        },  
        selectedPhotos: [],
        supportLength: 5
    };

    this.props.navigation.setParams({notificationAction: this.onNotification, isIncome: this.props.isNewNotifications});
}

我的渲染：

<View style={{width: width, maxHeight: 600}}>
            <ScrollView >
                <View style={{flexDirection: 'row', width: width, flexWrap: 'wrap',marginBottom:40, justifyContent: 'space-between'}}>
                {
                    this.state.photos.map((p, i) => {
                        return (
                            <SelectedPhoto
                                key={i}
                                index={i}
                                style={{
                                    width: photoWidth,
                                    height: photoWidth,
                                }}
                                borderColor = "white" 
                                limit={this.state.supportLength}
                                photo={p}
                                onSelectPhoto={this.onSelectPhoto}
                                onDeselectPhoto={this.onDeselectPhoto}
                            />
                        );
                    })
                }
                </View>
            </ScrollView>
            <View style={{ position:'absolute', right:-15, top:475 }}>
                <Button

                    onPress={this.onNext}  
                    containerViewStyle={{width: width}}
                    backgroundColor={Colors.red}
                    title='NEXT' />
            </View>             
        </View>

SelectedPhoto.js：

onPress = () => {
    console.log('onPress')
    if (this.state.selected === true) {
        this.setState({selected: !this.state.selected});
        this.props.onDeselectPhoto(this.props.photo);
    }
    else {
        console.log("this.props.selectedPhotos = ", this.props.selectedPhotos);
        console.log("this.props.limit = ", this.props.limit);

        if (this.props.selectedPhotos < this.props.limit - 1) {
            this.setState({selected: !this.state.selected});
        }

        this.props.onSelectPhoto(this.props.photo);             
    }
}

标签： javascriptarraysloopsreact-native