Как я могу соединить два сборщика как город-район в React-Native?

Question

У меня есть файл JSON, например:

[
  {
    "city": "Adana",
    "plaka": 1,
    "districts": [
      "Aladağ",
      "Ceyhan",
      "Çukurova",
      "Feke",
      "İmamoğlu",
      "Karaisalı",
      "Karataş",
      "Kozan",
      "Pozantı",
      "Saimbeyli",
      "Sarıçam",
      "Seyhan",
      "Tufanbeyli",
      "Yumurtalık",
      "Yüreğir"
    ]
  },
  {
    "city": "Adıyaman",
    "plaka": 2,
    "districts": [
      "Besni",
      "Çelikhan",
      "Gerger",
      "Gölbaşı",
      "Kahta",
      "Merkez",
      "Samsat",
      "Sincik",
      "Tut"
    ]
  }
 ]

Я хочу использовать этот файл JSON, но не могу подключить средства выбора.Вот мой первый сборщик:

<Picker
        selectedValue={this.state.selectedCity}
        onValueChange={(itemValue) => {
            this.setState({ selectedCity: itemValue });
        }}
    >
    {this.props.cities.map(city => {
        return (
            <Picker.Item label={city.city} value={city.city} key={city.plaka} />
        );
    })}
</Picker>

city - это мой объект, city.city - это, кстати, название моего города.

Если я передал объект города в Picker.Item какзначение, сборщик всегда показывает город "Адана".

Answer 1

Сначала возьмем три переменные selectedCity для хранения названия выбранного города, selectedCityIndex для хранения индекса выбранного города и selectedDistrict длясохраните название выбранного района.

возьмите его в своем конструкторе:

constructor(props) {
        super(props);
        this.state = {
            selectedCity: '',
            selectedCityIndex: 0, //by default selected index is 0
            selectedDistrict: '',
        };
    }

И в вашем методе рендеринга сделайте отображение между городом и районом.Пожалуйста, смотрите код ниже, это может помочь вам.

 render() {
        return (
            <View>
                <Picker
                    selectedValue={this.state.selectedCity}
                    onValueChange={(itemValue, itemIndex) => {
                        this.setState({
                            selectedCity: itemValue,
                            selectedCityIndex: itemIndex
                        });
                    }}
                >
                    {this.state.cities.map(city => {
                        return (
                            <Picker.Item label={city.city} value={city.city} key={city.plaka} />
                        );
                    })}
                </Picker>
                <Picker
                    selectedValue={this.state.selectedDistrict}
                    onValueChange={(itemValue, itemIndex) => {
                        this.setState({
                            selectedDistrict: itemValue,
                        });
                    }}
                >
     //render district list based on selected city
                    {this.props.cities.length > 0 && this.props.cities[this.state.selectedCityIndex].districts.map(district => {
                        return (
                            <Picker.Item label={district} value={district} key={district} />
                        );
                    })}
                </Picker>
            </View>
        );
    }

Answer 2

<Picker
    selectedValue={this.state.selectedCity.plaka}
    onValueChange={(itemValue) => {
        this.setState({ selectedCity: itemValue });
    }}
>
{this.props.cities.map(city => {
    return (
        <Picker.Item label={city.city} value={city.city} key={city.plaka} />
    );
})}