Picker item Selection 上的调用函数反应原生

Question

我试图调用function每当我选择一个项目picker，并显示与所选择的项目alert。
这就是我在做什么：-

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button,Platform,ActivityIndicator, Text, Picker, ScrollView } from 'react-native';
export default class FirstProject extends Component {
   constructor(props) {
  super(props);
  this.state = {
    isLoading: true,
    throttlemode:'',
  }
}
GetSelectedThrottleModeItem=(throttlemode)=>{
Alert.alert(this.state.throttlemode)
}
render() {
return (
    <View style={styles.MainContainerAddCamp}>
    <Text style={{fontSize: 12}}> Throttle Mode</Text>
    <Picker style={styles.PickerStyleClass}
  selectedValue={this.state.throttlemode}
  onValueChange={(throttlemodeValue, throttlemodeIndex) => this.GetSelectedThrottleModeItem(this.setState({throttlemode:throttlemodeValue}))}>
    <Picker.Item label="Asap" value="asap" />
    <Picker.Item label="Even" value="even" />
    </Picker>
   </View>
  );
}
}
const styles = StyleSheet.create({
MainContainerAddCamp :{
flex:1,
margin: 10,
paddingTop: (Platform.OS === 'ios') ? 20 : 20,
padding: 5,
},
TextInputStyleClass: {
textAlign: 'left',
paddingLeft: 7,
marginBottom: 7,
height: 40,
borderWidth: 1,
borderColor: '#00BCD4',
},
PickerStyleClass:{
    backgroundColor:'#87ceeb',
    paddingLeft: 7,
marginBottom: 7,
height: 40,
borderWidth: 1,
 borderColor: '#FF5722',
}
});

此代码显示先前选择的值。我怎样才能让它显示当前选定的值。
请建议我错过的地方。

Answer 1

首先，setState方法不返回任何内容。其次，调用setState方法后，无法知道状态是否发生变化，这是因为setState方法是异步的。您可以将回调分配给setState方法的第二个参数以了解状态更改。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button,Platform,ActivityIndicator, Text, Picker, ScrollView } from 'react-native';
export default class FirstProject extends Component {
   constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      throttlemode:'',
    }
  }
  onPickerValueChange=(value, index)=>{
    this.setState(
      {
        "throttlemode": value
      },
      () => {
        // here is our callback that will be fired after state change.
        Alert.alert("Throttlemode", this.state.throttlemode);
      }
    );
  }
  render() {
    return (
        <View style={styles.MainContainerAddCamp}>
        <Text style={{fontSize: 12}}> Throttle Mode</Text>
        <Picker style={styles.PickerStyleClass}
        selectedValue={this.state.throttlemode}
        onValueChange={this.onPickerValueChange}>
          <Picker.Item label="Asap" value="asap" />
          <Picker.Item label="Even" value="even" />
        </Picker>
       </View>
      );
  }
}
const styles = StyleSheet.create({
MainContainerAddCamp :{
flex:1,
margin: 10,
paddingTop: (Platform.OS === 'ios') ? 20 : 20,
padding: 5,
},
TextInputStyleClass: {
textAlign: 'left',
paddingLeft: 7,
marginBottom: 7,
height: 40,
borderWidth: 1,
borderColor: '#00BCD4',
},
PickerStyleClass:{
    backgroundColor:'#87ceeb',
    paddingLeft: 7,
marginBottom: 7,
height: 40,
borderWidth: 1,
 borderColor: '#FF5722',
}
});