React Native Picker: Фильтр Specifi c и дубликат - PullRequest
3 голосов
/ 20 марта 2020

Я использую React Native Picker .

Я звоню API, который возвращает список State и City.

  • На данный момент существует два State: Kuala Lumpur (state: 14) и Selangor (state: 10)

  • state: 14 имеет два City: Kuala Lumpur (city: 262) и Sungai Besi (city: 263)

  • state: 10 имеет один City : Puchong (city: 256)

Данные JSON выглядят так:

{
    "data": [
        {
            "city": "262",
            "state": "14",
            "city_desc": "Kuala Lumpur",
            "state_desc": "Kuala Lumpur"
        },
        {
            "city": "263",
            "state": "14",
            "city_desc": "Sungai Besi",
            "state_desc": "Kuala Lumpur"
        },
        {
            "city": "256",
            "state": "10",
            "city_desc": "Puchong",
            "state_desc": "Selangor"
        }
    ]
}

В моем приложение, когда я вызываю API, средство выбора загружает все State и City.

Однако, есть ли в любом случае, я могу фильтровать State и City там, где я хочу показать City на основе выбранного State?

т.е. если я выберу state: 14, сборщик должен показывать ТОЛЬКО city: 262 и city: 263

или Если я выберу state: 10, сборщик должен показывать ТОЛЬКО city: 256

ВАЖНОЕ ПРИМЕЧАНИЕ: На данный момент в данных есть только два State, но в будущем я буду добавлять несколько State, которые будут состоять из нескольких City каждый. Например: state: A будет иметь 5 городов, state: B будет иметь 3 города и c.

Пожалуйста, дайте мне знать, если есть эффективный способ фильтрации City на основе State выбран и, как всегда, вся помощь будет высоко ценится.

Фрагмент кода, представленный ниже:

class ClientScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            pickerValueState: null,
            dataState: [],

            pickerValueCity: null,
            dataCity: [],

            isLoading: true,
        }
    }

    componentDidMount() {
        console.log('ComponentDidMount()');
        this.apiStateCity();
    }

    apiStateCity() {
        let self = this;
        AsyncStorage.getItem('my_token').then((keyValue) => {
            axios({
                method: 'get',
                url: Constants.API_URL + 'user_c/c_State_City/',
                responseType: 'json',
                headers: {
                    'X-API-KEY': Constants.API_KEY,
                    'Authorization': keyValue,
                },
            })
                .then(function (response) {
                    console.log('apiStateCity Response: ', response.data.data);
                    self.setState({
                        dataState: response.data.data,
                    });
                })
                .catch(function (error) {
                    console.log('Error (1st): ', error);
                });
        }, (error) => {
            console.log('Error (2nd): ', error) //Display error
        });
    }

    stateList() {
        return (
            <View>
                <Text>Select Location</Text>
                <Text>State</Text>
                <View>
                    <Picker
                        mode="dropdown"
                        selectedValue={this.state.pickerValueState}
                        onValueChange={(itemValue, itemIndex) => {
                            this.setState({ pickerValueState: itemValue });
                            console.log('State selected (itemValue): ', itemValue);
                        }}
                    >
                        {
                            this.state.dataState.map((item, key) => (
                                <Picker.Item label={item.state_desc} value={item.state} key={key} />)
                            )
                        }
                    </Picker>
                </View>
            </View>
        );
    }

    cityList() {
        return (
            <View>
                <Text>City</Text>
                <View>
                    <Picker
                        mode="dropdown"
                        selectedValue={this.state.pickerValueCity}
                        onValueChange={(itemValue, itemIndex) => {
                            this.setState({ pickerValueCity: itemValue });
                            console.log('City selected (itemValue): ', itemValue);
                        }}
                    >
                        {
                            this.state.dataState.map((item, key) => (
                                <Picker.Item label={item.city_desc} value={item.city} key={key} />)
                            )
                        }
                    </Picker>
                </View>
            </View>
        );
    }

    render() {
        return (
            <View>
                <Text>BookingApp</Text>
                <View>
                    {this.stateList()}
                    {this.cityList()}
                    {this.button()}
                </View>
            </View>
        );
    }
}

Снимок экрана из приложения:

Screenshot 1 Screenshot 2

1 Ответ

0 голосов
/ 20 марта 2020

var A = {
    "data": [
        {
            "city": "262",
            "state": "14",
            "city_desc": "Kuala Lumpur",
            "state_desc": "Kuala Lumpur"
        },
        {
            "city": "263",
            "state": "14",
            "city_desc": "Sungai Besi",
            "state_desc": "Kuala Lumpur"
        },
        {
            "city": "256",
            "state": "10",
            "city_desc": "Puchong",
            "state_desc": "Selangor"
        }
    ]
};

let B= A.data.filter( item => item.state === '14');
console.log(B);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...