javascript - react native 选择器 : Filter Specific and Duplicate Item

Question

我正在使用 React Native Picker .

我正在调用一个返回 State 和 City 列表的 API。

• For now, there are two State: Kuala Lumpur (state: 14) and Selangor (state: 10)

• state: 14 has two City: Kuala Lumpur (city: 262) and Sungai Besi (city: 263)

• state: 10 has one 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 时，Picker 会加载所有的 State 和 City。

However, is there anyway I can filter the State and City where I ONLY want to show the City based on the State selected?

i.e. If I select state: 14, the picker should ONLY show city: 262 and city: 263

or If I select state: 10, the picker should ONLY show city: 256

IMPORTANT NOTE: For now there are only two State in the data BUT in the future I will be adding multiple State which will consists of multiple City each. For example: state: A will have 5 cities, state: B will have 3 cities etc.

如果有任何有效的方法可以根据所选的State过滤City，请务必告诉我，我们将一如既往地感谢您的帮助。

下面提供的代码片段:

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>
        );
    }
}

来自应用程序的屏幕截图:

Answer 1

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);