reactjs - React Native 选择器和控制台显示相同状态的不同值

Question

我想使用选择器来选择国家/地区:

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>
        )
    }
}

• 在模拟器中:

  起初标签是印度。当我从印度选择到中国时，标签更改为中国。同样，如果我选择印度，标签就会更改为印度。

• 但是，在控制台中:

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

我在这里做错了什么？我实在想不通。这应该有效，因为在模拟器中，如果我选择中国/印度，标签会相应更改。我在这里缺少什么？请帮我。谢谢。

Answer 1

this.setState 调用不是同步过程。调用 setState 将其设置为更新批处理。您的 console.log 语句应该在 setState 的回调参数中调用:

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

参见setState doc