反应本机选择器ArrayIndexOutOfBoundsExeception

Question

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

我有两个Picker组件：Error occurred while reading WSGI handler: Traceback (most recent call last): File "C:\inetpub\wwwroot\mysite\wfastcgi.py", line 791, in main env, handler = read_wsgi_handler(response.physical_path) File "C:\inetpub\wwwroot\mysite\wfastcgi.py", line 633, in read_wsgi_handler handler = get_wsgi_handler(os.getenv("WSGI_HANDLER")) File "C:\inetpub\wwwroot\mysite\wfastcgi.py", line 600, in get_wsgi_handler handler = __import__(module_name, fromlist=[name_list[0][0]]) File "C:\inetpub\wwwroot\mysite\app.py", line 1, in <module> import dash File "C:\ProgramData\Anaconda3\lib\site-packages\dash\__init__.py", line 1, in <module> from .dash import Dash, no_update # noqa: F401 File "C:\ProgramData\Anaconda3\lib\site-packages\dash\dash.py", line 23, in <module> import plotly File "C:\ProgramData\Anaconda3\lib\site-packages\plotly\__init__.py", line 30, in <module> from plotly import ( File "C:\ProgramData\Anaconda3\lib\site-packages\plotly\graph_objs\__init__.py", line 100161, in <module> import ipywidgets File "C:\ProgramData\Anaconda3\lib\site-packages\ipywidgets\__init__.py", line 23, in <module> from IPython import get_ipython File "C:\ProgramData\Anaconda3\lib\site-packages\IPython\__init__.py", line 55, in <module> from .terminal.embed import embed File "C:\ProgramData\Anaconda3\lib\site-packages\IPython\terminal\embed.py", line 15, in <module> from IPython.core.interactiveshell import DummyMod, InteractiveShell File "C:\ProgramData\Anaconda3\lib\site-packages\IPython\core\interactiveshell.py", line 64, in <module> from IPython.utils import io File "C:\ProgramData\Anaconda3\lib\site-packages\IPython\utils\io.py", line 94, in <module> stdin = IOStream(sys.stdin, fallback=devnull) File "C:\ProgramData\Anaconda3\lib\site-packages\IPython\utils\io.py", line 38, in __init__ for meth in filter(clone, dir(stream)): File "C:\ProgramData\Anaconda3\lib\site-packages\IPython\utils\io.py", line 37, in clone return not hasattr(self, meth) and not meth.startswith('_') File "C:\ProgramData\Anaconda3\lib\site-packages\IPython\utils\io.py", line 81, in closed return self.stream.closed ValueError: underlying buffer has been detached （State）和stateList() function（City）。我正在调用两个API：cityList() function函数将加载apiState()的列表，并根据所选的状态，State函数将显示apiCity(state_identification)的列表。 （下面提供了代码段）

代码段：

City

在继续之前，这里是JSON数据以及 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> ); } } } 和State之间的关系：

City

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

1。 ArrayIndexOutOfBoundsExeception：长度= 1；索引= 1（下面提供的屏幕截图）：

按照此顺序，应用程序将在100％的时间内崩溃：

• 选择//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" } ] }
• 然后更改为选择"state":"10"和"state":"14"
• 然后最后再次选择"city":"263"

该应用立即崩溃。

2。加载值的问题：

应用最初加载时，"state":"10"被自动选择，但"state": "14"选择器仍然为空/不显示标签。

然后，如果我选择City，则"state":"10"选择器将加载值City（并在console.log上显示该值），并显示标签"city": "256"。

但是，当我再次选择"city_desc": "Puchong"时，"state": "14"选择器不会加载该值（在console.log上不显示该值），而仅显示标签{{1} }。一旦我开始在City和"city_desc": "Kuala Lumpur"之间交换时，它才开始加载该值。

最后，当我再次选择"city_desc": "Kuala Lumpur"时，"city_desc": "Sungai Besi"选择器不会加载该值（在console.log上不显示该值），而仅显示标签{{1} }。

最后，我从这里尝试了以下solution（即"state":"10" ），但没有成功。

Answer 1

与此：

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

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

因此在更改事件中，只需执行以下操作：

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

和apiCityFunction中，在setState中同时获取城市和州：

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