Cannot read property '' of undefined (react)?

Question

I tried binding but it didn't change anything and now I'm out of ideas. The smallest hint would be huge help. Thank you!

export default class Login extends React.Component {
 
  constructor(props) {
    super(props);
    this.state = {
    persons: [],
    name: '',
    password: '',
  }
  this.handleSubmit3 = this.handleSubmit3.bind(this);
}

and the error location (setstate in success function): Cannot read property 'persons' of undefined

handleSubmit3 = event => {
    event.preventDefault();
    var user = this.state.name + '$' + this.state.password;
    
    $.ajax({
                    url: 'https://localhost:44348/api/user/LoginUserCheckPassword',
                    type: 'POST',
                    data: JSON.stringify(user),
                    contentType: 'application/json',
                    dataType: 'json',
                    async: false,
                    success: function (data) {
                        this.setState({persons: this.state.persons, name: this.state.name, password: data});  //error here
                    },
                    error: function (jQXHR, textStatus, errorThrown) {
                        console.log("An error occurred whilst trying to contact the server: " + jQXHR.status + " " + textStatus + " " + errorThrown);
                    }
                   
                }); 
  }

Aadil Mehraj · Answer 1 · 2020-10-16T10:45:50.537

1

You need to bind your method, likewise:

this.handleSubmit3 = handleSubmit3.bind(this);

Also change definition to function instead of arrow function.

function handleSubmit3(e) {
    ...
}

You can read more about limitations and use-cases of arrow functions here

edited Oct 16 '20 at 10:45

answered Oct 16 '20 at 10:20

Aadil Mehraj

2,586
1
7
17

thank you, I didn't test this because the other answer is somewhat shorter but the material you linked is very useful – user9630194 Oct 16 '20 at 10:44

score 1 · Accepted Answer · answered Oct 16 '20 at 10:39

You don't need to bind if you are using arrow functions. You can read more about it at Can you bind 'this' in an arrow function? question.

The problem is that the success: function (data) is not binded nor the arrow function. It means this is referencing to the success function - not the class. Using arrow function success: (data) => {} should fix your problem.

Something like this:

handleSubmit3 = event => {
    event.preventDefault();
    var user = this.state.name + '$' + this.state.password;

    $.ajax({
        url: 'https://localhost:44348/api/user/LoginUserCheckPassword',
        type: 'POST',
        data: JSON.stringify(user),
        contentType: 'application/json',
        dataType: 'json',
        async: false,
        success: (data) => {
            this.setState({persons: this.state.persons, name: this.state.name, password: data});  //error here
        },
        error: (jQXHR, textStatus, errorThrown) => {
            console.log("An error occurred whilst trying to contact the server: " + jQXHR.status + " " + textStatus + " " + errorThrown);
        }

    });
}

Btw you don't need to set `persons` again from `state.persons` if they were not changed. You can update them independently only with `this.setState({password: data});` and both, `persons` and `name`, won't be affected. You can read more about it in [documentation - State Updates are Merged](https://reactjs.org/docs/state-and-lifecycle.html#state-updates-are-merged). — Jax-p, Oct 16 '20 at 10:46

Cannot read property '' of undefined (react)?

2 Answers2