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

在模拟器中：

起初，Label是印度。当我从印度选择到中国时，标签将更改为中国。如果我选择印度，标签将改为印度。
但是，在控制台中：

起初this.state.country是印度。但是当我从印度选择到中国时，没有任何改变，只有印度是两次。如果我选择从中国到印度，this.state.country再次是中国而不是印度。

我在这里做错了什么？我真的无法解决这个问题。这应该是有效的，因为在模拟器中如果我选择china / india，标签会相应地改变。我在这里错过了什么？请帮我。谢谢。

Answer 1

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

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

请参阅setState doc

React native picker和console显示相同状态的不同值

1 个答案: