Я использую 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>
);
}
}
Снимок экрана из приложения: