setState doesn't return result wanted

Question

so here i have an OTP code verification , i have 4 textinputs for each number :

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


                    />

i've passed a random verification code from another class and im able to get it here :

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

        }
    }
}

so i tried to concatinate all the textinputs values in one and then verifiy it with the actual code sent :

    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!");
        }
    }
}

the problem is at the first try the code is correct but it does not work properly (i get an empty code in my log console) it shows me an error message of incorrect code , but at the second try it works ( the code can be seen in log console) is there any solution for this ?

Add the code following the setState in it's callback. Something like this.setState({ .... }, () => { Add your code here that follows setState }) — Lakshya, May 11 '21 at 17:11

score 0 · Answer 1 · answered May 11 '21 at 17:13

0

Your problem is that setState is asynchronous.

Maybe that Post helps you: When to use React setState callback

answered May 11 '21 at 17:13

Pascal

87
1
1

setState doesn't return result wanted

1 Answers1