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 张照片时，它不会显示限制消息，即限制，当进入下一个屏幕时，它只显示 5 张照片中的 4 张。我想问题是当值等于 5 时，我没有向数组中添加任何内容，因此他的值保持为 5，因为我根据数组的大小。添加到数组中的正确方法是什么，以便值会相应地改变？ 完整代码：https://pastebin.com/m0gxUCBt

Answer 1

假设您的 supportLength 是 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);
    }
}