0

I'm fairly new to react and I am starting to be comfortable with building out my own designs, accessing apis, etc...

I am trying to display errors for a signup page and I am setting a local storage variable thats value is the string that django-rest-auth returns in the error data. That part works fine (however if you can help me find a more efficient/straight forward way to pull the message from the error string that would be much appreciated.)

In my signup component, using componentWillReceiveProps, I then set the state of the component's local error variables to the value of the local storage's error variable. (again, I know this is a terrible way to do this)

  componentWillReceiveProps() {
    const success = localStorage.getItem("signupSuccess");
    if (success !== null) {
      this.setState({ hasError: true });
      const usernameError = localStorage.getItem("usernameError");
      const emailError = localStorage.getItem("emailError");
      const password1Error = localStorage.getItem("password1Error");
      const password2Error = localStorage.getItem("password2Error");
      this.setState({ usernameError: usernameError });
      this.setState({ emailError: emailError });
      this.setState({ password1Error: password1Error });
      this.setState({ password2Error: password2Error });
    }
    localStorage.removeItem("usernameError");
    localStorage.removeItem("emailError");
    localStorage.removeItem("password1Error");
    localStorage.removeItem("password2Error");
    console.log(localStorage.getItem("usernameError"));
  }

The main issue is that the errors don't update in the Signup component if they change(due to a correction, new problem, etc...) and I think it is because of the lifecycle method I chose.

Can someone explain componentWillReceiveProps or any general misunderstandings I have? Also what lifecycle method should I use so that It keeps updating every time I re-submit?

Thanks

Jack A
  • 88
  • 6
  • What version of react are you using ? Also isn't the `componentWillReceiveProps` lifecycle method firing even once ? – Muljayan Jun 01 '20 at 04:00
  • I'm using react 16.13.1 and yes, It does fire once but doesn't fire after that. – Jack A Jun 01 '20 at 14:38

0 Answers0