javascript - setState 不返回想要的结果

问题描述

所以在这里我有一个 OTP 代码验证，每个数字有 4 个文本输入：

                <TextInput
                    maxLength={1}
                    keyboardType='numeric'
                    ref={"pin1ref"}
                    onBlur={() => this.onBlur()}
                    onFocus={() => this.onFocus()}
                        style={{
                            backgroundColor: 'white',
                            fontWeight: '600',
                            alignSelf: 'center',
                            padding: normalize(10),
                            fontSize: normalize(34),
                            height: normalize(72),
                            width: normalize(72),
                            borderRadius: 20,
                            borderWidth: 1,
                            borderColor: '#D0DBEA',
                            textAlign: 'center'}}
                    onChangeText={(pin1) => {
                        this.setState({ pin1: pin1 })
                        if (pin1 != "") {
                            this.refs.pin2ref.focus()                           
                        }
                    }}
                    value={pin1}

                />

                    <TextInput
                    onBlur={() => this.onBlur()}
                    onFocus={() => this.onFocus()}
                    maxLength={1}
                    keyboardType='numeric'
                    ref={"pin2ref"}

                        style={styles.Input}
                    onChangeText={(pin2) => {
                        this.setState({ pin2: pin2 })
                        if (pin2 != "") {
                            this.refs.pin3ref.focus()
                        }
                    }}
                    value={pin2}
                />

                <TextInput
                    maxLength={1}
                    keyboardType='numeric'
                    ref={"pin3ref"}
                    onChangeText={(pin3) => {
                        this.setState({ pin3: pin3 })
                        if (pin3 != "") {
                            this.refs.pin4ref.focus()
                        }
                    }}
                    value={pin3}
                    style={styles.Input}

                />

                <TextInput
                    maxLength={1}
                    keyboardType='numeric'
                    ref={"pin4ref"}
                    onChangeText={(pin4) => this.setState({ pin4: pin4 })}
                    value={pin4}
                    style={styles.Input}


                    />

我已经从另一个班级传递了一个随机验证码，我可以在这里得到它：

export default class InputOTPScreen extends Component {
    componentDidMount() {
        this._unsubscribe = this.props.navigation.addListener('focus', () => {
            var code = this.props.route.params.verifyCode;
            if (this.state.verifyCode != code) {
                this.setState({ verifyCode: code });
            }
        });
        console.log("verifycode:", this.state.verifyCode)
    }

    componentWillUnmount() {
        this._unsubscribe();
    }
    constructor(props) {
        super(props)
        var code = this.props.route.params.verifyCode;
        this.state = {

            pin1: "",
            pin2: "",
            pin3: "",
            pin4: "",
            codeActivationFromClient: '',
            verifyCode: code

        }
    }
}

所以我尝试将所有 textinputs 值合并为一个，然后使用发送的实际代码对其进行验证：

    verify() {
        this.setState({ codeActivationFromClient: this.state.pin1 + this.state.pin2 + this.state.pin3 + this.state.pin4 })
        console.log("codeActivationFromClient : ", this.state.codeActivationFromClient)
        if (this.state.verifyCode == this.state.codeActivationFromClient) {
            console.log("code correct !")
        }
        else {
            console.log("Verify code is not correct!");
        }
    }
}

问题是在第一次尝试代码是正确的但它不能正常工作（我在我的日志控制台中得到一个空代码）它向我显示错误代码的错误消息，但在第二次尝试它工作（代码可以是在日志控制台中看到）有什么解决方案吗？

标签： javascriptnode.jsreact-native

javascript - setState 不返回想要的结果

问题描述

解决方案

推荐阅读