React JS how to fix cannot add property updater, object is not extensible, when using 'This'

Question

I am using a 'this.state' variable to hold a bool, until a function is triggred, this has been working fine with my websites up until now.

my constructer, and the function to trigger the error will be left below as well as the line with the error.

The error is being triggered on all the classes that use the same code,

constructor(props) {
      super(props);
      this.state = {
          email: '', 
          password: '',
          toDashboard: false,
        };

      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }



//see update for new handleLogin() function

render() {
      if (this.state.toDashboard === true) {
        return <Redirect to='/dashboard' />
      }
}

This is how invoke handleLogin():

handleSubmit = (e) => {
        e.preventDefault();
        const form = {
         password: this.state.password,
         email: this.state.email
        }
        this.handleLogin(form)
    }

update: I have change my function to an arrow function like this and are still getting the same error:

 handleLogin = (form) => {
      const email = form['email']
      const password = form['password']
      fire.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
          var errorMessage = error.message
          console.log(errorMessage)
      });
      fire.auth().onAuthStateChanged( user => {
          if (user) {
            console.log(user)
            //error happens here
            this.setState({ toDashboard: true })
          } else {
            // No user is signed in.
          }
      });          
  }

error:

Uncaught (in promise) TypeError: Cannot add property updater, object is not extensible
    at adoptClassInstance (react-dom.development.js:12821)
    at constructClassInstance (react-dom.development.js:12882)
    at updateClassComponent (react-dom.development.js:17100)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at Object.enqueueSetState (react-dom.development.js:12639)
    at LoginForm.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
    at loginform.js:31
    at auth.esm.js:389

GitHub repo is here if you want to see all the files: https://github.com/lukeacko12/tikkr

as i get another error if i dont, Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined, that happens if i dont use this clone = this — Luke Acko13
– Luke Acko13, Commented Apr 24, 2020 at 9:46
you can use arrow functions, so you won't need save this in local var — Илья Савич
– Илья Савич, Commented Apr 24, 2020 at 9:48
still getting. the sane error doing that @ИльяСавич — Luke Acko13
– Luke Acko13, Commented Apr 24, 2020 at 10:08

hichamkazan · Accepted Answer · 2020-04-24 10:21:40Z

1

Here handleLogin is not binded with this, you have 2 lines in constructor

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);

I can't see those two functions, so replace them with, or just add (if they exist), this one

this.handleLogin = this.handleLogin.bind(this);

or I would use an arrow function, and forget about binding

handleLogin = form => {
        const email = form['email']
        const password = form['password']
        fire.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
            var errorMessage = error.message
            console.log(errorMessage)
        });
        fire.auth().onAuthStateChanged( user => {
            if (user) {
              console.log(user)
             this.setState({ toDashboard: true })

              console.log(this.state.toDashboard)
            } else {
              // No user is signed in.
            }
        });          
    }

edited Apr 24, 2020 at 10:21

answered Apr 24, 2020 at 9:52

hichamkazan

3333 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Luke Acko13 Over a year ago

Im getting this error now following your code: Unhandled Rejection (TypeError): Cannot add property updater, object is not extensible

hichamkazan Over a year ago

where is this error thrown ? inside handle login ? pls if you could send the stack trace

Luke Acko13 Over a year ago

i have put the error on the question and it is thrown where the //error here comment is.

Collectives™ on Stack Overflow

React JS how to fix cannot add property updater, object is not extensible, when using 'This'

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related