Question

我想从选择器项中跳过特定帐户，所以我已经将要从父级中跳过的帐户传递到子组件中，但是其生成错误说

 error occured:TypeError: TypeError: TypeError: second argument to Function.prototype.apply must be an Array-like object (evaluating '[].concat.apply([],t.children)')

我已参考此提供的解决方案 link。我有“从帐户”和“到帐户”下拉列表，我想从“到帐户”下拉列表中跳过从帐户中选择的选项。这是我的孩子部分

    import React, { Component } from "react";
import { Picker, Icon } from "native-base";
import { Dimensions, Platform } from "react-native";

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

    render() {
        console.log('skipped Acct:'+JSON.stringify(this.props.skipAcct))
        let filteredItems = null ;
        if(this.props.accounts !== undefined && this.props.accounts.acctId != null){
            filteredItems = this.props.accounts;
        }

        if(filteredItems != null && this.props.skipAcct !== undefined && this.props.skipAcct.acctId != null){
            filteredItems = filteredItems.filter(acct=>{
                return acct.acctId == this.props.skipAcct.acctId ? false :true;
            })
        }

        console.log('filteredItems:'+JSON.stringify(filteredItems))
        return (
            <Picker
                selectedValue={this.props.selectedValue}
                mode="dropdown"
                iosHeader="Choose To Account"
                style={{ width: Platform.OS === "ios" ? undefined : Dimensions.get("window").width }}
                iosIcon={<Icon name="arrow-down" />}
                onValueChange={value => this.props.onValueChange(value)}
            >
                {filteredItems != null &&
                    filteredItems.map(acct => {

                        return <Picker.Item key={acct.acctId} label={acct.desc} value={acct} />;
                    })}         
            </Picker>
        );
    }
}

这是我的父组件

<View style={styles.item}>
                            <Text note>From Account</Text>

                            <AccountsDropDown
                                selectedValue={this.state.fromAcct}
                                accounts={this.state.xferSrcAccts}
                                navigation={this.props.navigation}
                                onValueChange={itemValue => this.setState({ fromAcct: itemValue })}
                            />
                        </View>
                        <View style={styles.item}>
                            <Text note>To Account</Text>

                            <AccountsDropDown
                                selectedValue={this.state.toAcct}
                                skipAcct = {this.state.fromAcct}
                                accounts={this.state.xferDestAccts}
                                navigation={this.props.navigation}
                                onValueChange={itemValue => this.setState({ toAcct: itemValue })}
                            />
                        </View>

Answer 1

我能够通过更改如下所示的render方法来解决此问题

    render() {
        console.log('skipped Acct:'+JSON.stringify(this.props.skipAcct))
        let filteredItems = [] ;
        if(this.props.accounts.length > 0){
            filteredItems = this.props.accounts;
        }

        if(filteredItems != null && this.props.skipAcct !== undefined && this.props.skipAcct.acctId != null){
            filteredItems = filteredItems.filter(acct=>{
                return acct.acctId == this.props.skipAcct.acctId ? false :true;
            })
        }

        console.log('filteredItems:'+JSON.stringify(filteredItems))
        if(filteredItems.length >0){
                return (
                    <Picker
                        selectedValue={this.props.selectedValue}
                        mode="dropdown"
                        iosHeader="Choose To Account"
                        style={{ width: Platform.OS === "ios" ? undefined : Dimensions.get("window").width }}
                        iosIcon={<Icon name="arrow-down" />}
                        onValueChange={value => this.props.onValueChange(value)}
                    >
                        {filteredItems.map(acct => {                    
                                return <Picker.Item key={acct.acctId} label={acct.desc} value={acct} />;
                            })}         
                    </Picker>
                );
            }
            return null;
    }
}

React Native-根据条件过滤本机基础选择器项目

1 个答案: