在三个失败的登录尝试上重定向的计数器没有任何作用

Question

I'm trying to make a counter in my React app that redirects if the server (Expressjs) sends status false on a pin try 3 times, I've verified through console logs that the status is actually sent, it's visibible in the chrome console. But for some reason my app does not redirect. I'm trying to redirect both using this.props.history.push and a conditional render in my React return. To count number of tries I have defined tries in my constructor and increase this value by 1 for every failed attempt, if the value is greater than 3 I want to redirect to a different page. Here is my react front end code (I removed the imports):

class logIn extends React.Component {
  constructor() {
    super();
    this.state = {
      cardnumber: '',
      pin: '',
      servercardnumber: {
        message: '',
        status: '',
        tries: 0
      }
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleEvent = e => {
    this.setState({ [e.target.name]: e.target.value });
  };
  handleSubmit = async e => {
    e.preventDefault();
    // get our form data out of state
    const { cardnumber, pin } = this.state;
    const data = { cardnumber, pin };
    const url = '/api/login';
    const serverResponse = await fetch(url, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': true
      },
      body: JSON.stringify(data)
    });
    const json = await serverResponse.json();
    console.log(json);
    console.log('json status is: ', json.status);
    if (json.status === false) {
      this.state.tries++;
    }
    if (this.state.tries < 3) {
      this.state.tries = false;
      this.props.history.push('/selectaction');
    }

    this.setState(
      prevState => {
        sessionStorage.setItem('cardnumber', json.message);

        console.log('json status is: ', json.status);
        return {
          servercardnumber: json.message,
          status: json.status
        };
      },
      () => {
        console.log(this.state.cardnumber);
      }
    );
  };

  render() {
    const { cardnumber, pin, status, tries } = this.state;
    return (
      <React.Fragment>
        {tries ? !<Redirect to="/selectaction" /> : null}
        {console.log('server says:')}
        {console.log(status)}
        <CssBaseline /> {/*https://material-ui.com/style/css-baseline */}
        <h1> Log in</h1>
        <form onSubmit={this.handleSubmit} method="POST" action="/api/formdata">
          <br />
          {/* Bytt ut med CSS block elementer eller noe slikt, bytt name på form fields til å hentes via JS  */}
          <TextField
            required
            id="standard-required"
            label="Card number"
            className="tekstfelt"
            margin="normal"
            defaultValue={cardnumber}
            name="cardnumber"
            onInput={e => {
              e.target.value = Math.max(0, parseInt(e.target.value))
                .toString()
                .slice(0, 12);
            }}
            onChange={e => this.handleEvent(e)}
          />
          <br />
          <TextField
            required
            id="standard-required"
            label="PIN code"
            className="tekstfelt"
            margin="normal"
            type="password"
            defaultValue={pin}
            name="pin"
            onInput={e => {
              e.target.value = Math.max(0, parseInt(e.target.value))
                .toString()
                .slice(0, 4);
            }}
            onChange={e => this.handleEvent(e)}
          />
          <br />
          <br />
          <Button type="submit" variant="contained" color="primary" className="test">
            <div className="test">Log in</div>
          </Button>
        </form>
        <p>
          Cardnumber: {this.state.cardnumber} <br />
          pin-code: {this.state.pin} <br />
        </p>
      </React.Fragment>
    );
  }
}
export default logIn;

Any ideas?

Answer 1

first of all, in your initial state tries key is nested under servercardnumber key and you're trying to access it on state directly. then you increment it, so:

a) you mutate state directly, which you shouldn't

b) if key does not exist on object and you try to increment it, you will get NaN as value of this key

so after that operation you now have this.state.tries , but set to NaN which will never be smaller than 3 (i think you meant 'greater than' here), but even if it was, you then set tries key to false (again directly) - on second try, incrementing false would result in 0, so you would get redirected after more attempts than you want. After fixing the initial state:

  this.state = {
    tries: 0,
    cardnumber: '',
    pin: '',
    servercardnumber: {
      message: '',
      status: '',
    }
  };

and your handler, some parts omitted for brevity:

handleSubmit = async e => {
    const {tries} = this.state
    // ...
    if (json.status === false) {
      this.setState(prevState => ({tries: prevState.tries + 1}, () => {
        if (tries >= 3) {
          this.props.history.push('/selectaction');
          return
        }
      })
    }
    // ...
    );
  };

three things changed in handler - if you want to use previous state in setState, you should pass a function. if you want to do something that relies on state being changed first, you can do that in callback function passed to setState as second, optional argument. and at the end you return to end executing function (i assume that if json.status is false for the third time you don't want to do anything else and just redirect)