Проблема, связанная с массивом в React Native

Question

import React from 'react';
import {
    View,
    ScrollView,
    Image,
    Dimensions,
    TextInput,
    Text,
    StatusBar,
    TouchableHighlight,
    Linking,
    Keyboard,
    CameraRoll,
    KeyboardAvoidingView
} from 'react-native';
import {connect} from 'react-redux';
import {ActionCreators} from '../redux/actions';
import {bindActionCreators} from 'redux';
import Colors from '../constants/Colors';
import api from '../api';
import {
    getEmailAddress,
    showError,
    renderMessageBar,
    registerMessageBar,
    unregisterMessageBar
} from '../utils/ComponentUtils';
import {
    regularHeader,
    mainHeader
} from '../utils/Headers';
import {NavigationActions} from 'react-navigation';
import {SelectionLimitDialog} from '../utils/Dialogs';
import {ifIphoneX, isIphoneX} from 'react-native-iphone-x-helper';
import {SafeAreaView} from 'react-navigation';

// specific component imports.
import {List, ListItem} from 'react-native-elements'
import {Button} from 'react-native-elements'
import Loader from '../components/Loader';
import LoaderError from '../components/LoaderError';
import SelectedPhoto from '../components/SelectedPhoto';

class MultiSafeeScreen extends React.Component
{
    static navigationOptions = ({navigation}) => {
        const {params} = navigation.state;
        const isIncome = params ? params.isIncome : false;
        const notificationAction = params ? params.notificationAction : () => {};
        const isShowBack = params ? params.isShowBack : false;

        return mainHeader({
            isShowBack: isShowBack,
            backAction: () => navigation.goBack(),
            notificationAction: () => notificationAction(),
            income: isIncome
        });
    };

    constructor(props) {
        super(props);

        this.selectedPhotos = [];

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

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

    UNSAFE_componentWillReceiveProps(newProps) {
        if (newProps.isNewNotifications !== this.props.isNewNotifications) {
            this.props.navigation.setParams({notificationAction: this.onNotification, isIncome: newProps.isNewNotifications});
        }          
    }

    componentDidMount() {
        registerMessageBar(this.refs.alert);

        let options = {
            first: 30,
            assetType: 'Photos',           
        }

        CameraRoll.getPhotos(options)
        .then(r => {
            this.setState({
                photos: r.edges,
                loader: {
                    loading: 1,
                    message: "Loading photos..."
                },                                 
            });
        })
        .catch((err) => {
             //Error Loading Images
        });

        StatusBar.setHidden(false);
    }

    componentWillUnmount() {
        unregisterMessageBar();

        this.props.setSelectedPhotos(0);
    }

    onNotification = () => {
        this.props.setNewNotifications(false);
        this.props.navigation.navigate("Notifications");
    }

    closeKeyboard = () => {
        Keyboard.dismiss();
    }

    onSelectPhoto = (photo, index) => {
        let photos = new Set([...this.selectedPhotos]);
        let len = photos.size + 1 ;
        console.log('len = ', len)

        if (len > this.state.supportLength) {
            this.limitDialog.open();
        }
        else if (len === this.state.supportLength) {
            this.setState({selectedPhotos: this.selectedPhotos});
            this.props.setSelectedPhotos(len); 
            console.log('setSelectedPhotos= ', this.props.setSelectedPhotos)
        }
        else {
            photos.add(photo);
            this.selectedPhotos = Array.from(photos);
        }
    }

Привет, я был бы признателен за некоторые рекомендации с моим кодом, особенно с функцией onSelectPhoto, где я пытаюсь запустить массив, он работает, но только частично, он не показывает сообщение с ограничением, когда пользователь выбирает более 5 фотографий, что предел и при переходе к следующему экрану он показывает только 4 фотографии из 5. Я предполагаю, что проблема в том, что когда значение равно 5, я ничего не добавляю к массиву, и поэтому его значение остается 5, потому что я считаю размер в соответствии с размер массива. Что было бы правильным способом добавить в массив, чтобы значение изменилось соответственно? полный код: https://pastebin.com/m0gxUCBt

Answer 1

Предполагая, что ваша длина поддержки равна 5, что должно делать эту работу. Попробуйте отладить свой код с помощью console.log, чтобы увидеть значение в переменной len и this.state.supportLength.

Еще один способ отладки, который я предпочитаю, - это использование точек останова в вашем коде, чтобы увидеть фактический поток выполнения вашего кода.

Если вы не знаете, как это сделать. Проверьте эту статью https://facebook.github.io/react-native/docs/debugging.html

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

    if (len >= this.state.supportLength) {
        this.limitDialog.open();
    }
    else if (len === this.state.supportLength) {
        this.setState({selectedPhotos: this.selectedPhotos});
        this.props.setSelectedPhotos(len); 
        console.log('setSelectedPhotos= ', this.props.setSelectedPhotos)
    }
    else {
        photos.add(photo);
        this.selectedPhotos = Array.from(photos);
    }
}