我如何将两个采摘者连接为反应本地的城市区域

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作为值，则Picker总是显示" Adana"城市。

Answer 1

首先，取出三个变量 selectedcity 是存储所选城市的名称， selecteCityIndex 是存储所选城市的索引 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} />
    );
})}