React 本机选择器和控制台显示相同状态的不同值

Question

我想使用选择器前往 select 个国家：

export default class RegisterMobile extends Component {
    constructor(props) {
        super(props)
        this.state = {
            country: 'india',
        }
    }

    changeCountry = (c) => {
        this.setState({
            country: c,
        })
        console.log(this.state.country);
    }

    render() {
        return(
            <View style={styles.container}>
                <View style={styles.selectCountry}>
                    <Picker selectedValue={this.state.country} onValueChange={this.changeCountry}>
                        <Picker.Item label="India" value="india" />
                        <Picker.Item label="China" value="china" />
                    </Picker>
                </View>
            </View>
        )
    }
}

在模拟器中：

起初标签是印度。当我select从印度到中国的时候，Label被改成了中国。同样，如果我选择印度，标签将更改为印度。
但是，在控制台中：

首先this.state.country是印度。但是当我select从印度到中国时，什么都没有改变，除了印度是两倍。同样，如果我 select 从中国到印度，this.state.country 是中国而不是印度。

我在这里做错了什么？我真的想不通。这应该是有效的，因为在模拟器中，如果我 select china/india，标签会相应地改变。我在这里错过了什么？请帮我。谢谢。

Answer 1

this.setState调用不是同步过程。调用 setState 将其放入一个更新批次。您的 console.log 语句应在 setState:

的回调参数中调用

this.setState({country: c,},
         ()=>{ console.log(this.state.country)}
 )

见setState doc

React 本机选择器和控制台显示相同状态的不同值

React native picker and console showing different value of the same state

reactjs

react-native

react-native-android