javascript - React Native 选择器 ArrayIndexOutOfBoundsException

Question

我正在使用Picker来自 React Native 的组件。

我有两个 Picker 组件:State(stateList() 函数)和 City(cityList() 函数) >)。我正在调用两个 API:apiState() 函数加载 State 列表，并根据所选的 State，apiCity(state_identification) 函数将显示城市列表。 (下面提供了代码片段)

代码片段:

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

        pickerValueCity: null,
        dataCity: [],

        isLoading: true,
    }
}

componentDidMount() {
    this.apiState();
}

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

apiCity(state_identification) {
    let self = this;
    AsyncStorage.getItem('my_token').then((keyValue) => {
        axios({
            method: 'post',
            url: Constants.API_URL + 'user_c/cCity/',
            data: {
                state_id: state_identification,
            },
            /*params: {
                state_id: state_identification,
            },*/
            responseType: 'json',
            headers: {
                'X-API-KEY': Constants.API_KEY,
                'Authorization': keyValue,
            },
        })
            .then(function (response) {
                console.log('Response City Data: ', response.data.all_city);
                self.setState({
                    pickerValueState: state_identification,
                    dataCity: response.data.all_city,
                    isLoading: false,
                });
            })
            .catch(function (error) {
                console.log('Error (1st): ', error);
            });
    }, (error) => {
        console.log('Error (2nd): ', error) //Display error
    });
}

stateList() {
    return (
        <View>
            <Text h4 h4Style={{ textAlign: 'center' }}>Select Location</Text>
            <Text h4 h4Style={styles.location}>State</Text>
            <View style={styles.pickerContainer}>
                <Picker
                    mode="dropdown"
                    selectedValue={this.state.pickerValueState}
                    //onValueChange={(itemValue, itemIndex) => this.setState({ pickerValueState: itemValue })}
                    onValueChange={(itemValue, itemIndex) => {
                        /*this.setState({ pickerValueState: itemValue },
                            () => {
                                this.apiCity(this.state.pickerValueState, itemValue);
                                console.log('State selected: ', (this.state.pickerValueState))
                            }
                        )*/
                        this.apiCity(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 h4 h4Style={styles.location}>City</Text>
            <View style={styles.pickerContainer}>
                <Picker
                    mode="dropdown"
                    selectedValue={this.state.pickerValueCity}
                    onValueChange={(itemValue, itemIndex) => {
                        this.setState({ pickerValueCity: itemValue },
                            () => {
                                console.log('City selected: ', (this.state.pickerValueCity))
                            }
                        )
                    }}
                >
                    {
                        this.state.dataCity.map((item, key) => (
                            <Picker.Item label={item.city_desc} value={item.city} key={key} />)
                        )
                    }
                </Picker>
            </View>
        </View>
    );
}

render() {
    if (this.state.isLoading) {
        return (
            <View style={{ flex: 1, justifyContent: 'center' }}>
                <ActivityIndicator size="large" color="#0000ff" />
            </View>
        );
    } else {
        return (
            <View style={styles.container}>
                <View style={styles.locationContainer}>
                    {this.stateList()}
                    {this.cityList()}
                </View>
            </View>
        );
    }
}
}

在继续之前，先介绍一下 JSON 数据以及 State 和 City 之间的关系:

//Lists of states:

{
    "state": [
        {
            "state": "14",
            "state_desc": "Kuala Lumpur"
        },
        {
            "state": "10",
            "state_desc": "Selangor"
        }
    ]
}

//if "state":"14" is selected, these cities are rendered in the picker
{
    "all_city": [
        {
            "city": "262",
            "city_desc": "Kuala Lumpur"
        },
        {
            "city": "263",
            "city_desc": "Sungai Besi"
        }
    ]
}

//if "state":"10" is selected, these cities are rendered in the picker
{
    "all_city": [
        {
            "city": "256",
            "city_desc": "Puchong"
        }
    ]
}

我的代码遇到了几个问题，这些问题是:

1. ArrayIndexOutOfBoundsExeception: length=1;index=1 (screenshot provided below):

By following this sequence the app crashes 100% of the time:

• select "state":"10"
• then change to select "state":"14" and "city":"263"
• then finally select "state":"10" again

the app immediately crashes.

2. Problem with loading values:

When the app initially loads, "state": "14" is auto-selected BUT the City picker remains empty / doesn't display the label.

Then if I select "state":"10", the City picker loads the value "city": "256" ( and shows the value on the console.log) and it displays the label "city_desc": "Puchong".

However, when I select "state": "14" again, the City picker doesn't load the value (doesn't show the value on the console.log) but only displays the label "city_desc": "Kuala Lumpur". It only starts loading the value once I start interchanging between "city_desc": "Kuala Lumpur" and "city_desc": "Sungai Besi"

FINALLY, when I select "state":"10" AGAIN, the City picker doesn't load the value (doesn't show the value on the console.log) but only displays the label "city_desc": "Puchong".

最后，我尝试了以下solution (即key={item.length})从这里，但它不起作用。

Answer 1

这样:

 this.setState({ pickerValueState: itemValue },
                        () => {
                            this.apiCity(this.state.pickerValueState);
                            console.log('State selected: ', (this.state.pickerValueState))
                        }
                    )

有一段时间，该州有新州，但有旧城。这会导致你的异常。尝试在 city API 的响应中设置新的 state 的状态。所以你同时设置了新的州和新的城市。这可能意味着您应该将新状态作为参数传递给 apiCity 函数，然后在 api 响应中使用它。

所以在更改事件中只需执行以下操作:

this.apiCity(this.state.pickerValueState, itemValue);

以及在 apiCityFunction 中，在 setState 中同时获取城市和州之后:

 self.setState({
       pickerValueState: state,
       dataCity: response.data.all_city,
       isLoading: false,
 });