ncaught TypeError: Cannot read property ' ' of undefined

Question

I'm trying to add a checkbox to a webpage with react. its value is in useWalletCreadit. after that, by submitting the form it should post it to api.py file. this is post method:

submitForm: (pay_method, useWalletCredit, onSuccess, onFailure) => {
    console.log(this.useWalletCredit);
    dispatch({type: 'START_LOADING'});
    return PrivateApi.post('cart/pay', {
        'submit-pay': 'submit',
        web: 'true',
        'pay-method': pay_method,
        'useWalletCredit_': this.useWalletCredit,
    })
        .then(res => {
            dispatch({type: 'END_LOADING'});
            if (onSuccess) onSuccess(res.data);
        }).catch(error => {
            dispatch({type: 'END_LOADING'});
            if (onFailure) onFailure(error);
        })
},

it raise this error:

CartPay.js:532 Uncaught TypeError: Cannot read property 'useWalletCredit' of undefined

The `submitForm` method takes a parameter named `useWalletCredit`, but the code within the method ignores that argument and uses `this.useWalletCredit`. Why? — Heretic Monkey, Sep 04 '19 at 12:40
I honestly tried to avoid asking that question because I wanted to help solve the problem first. But yes, that was very puzzling. Using the parameter is the easier thing to do, and is very much the intuitive one too. — Nnanyielugo, Sep 04 '19 at 12:44
useWalletCreadit defined in states at the top. this is why it needs this, to point to useWalletState. @HereticMonkey — MHB, Sep 04 '19 at 12:46
If useWalletCredit is stored in state, why not remove that parameter you have on submitForm? — Nathan Hall, Sep 04 '19 at 13:23
Possible duplicate of [How to access the correct `this` inside a callback?](https://stackoverflow.com/q/20279484/1218980) — Emile Bergeron, Sep 04 '19 at 15:49

score 0 · Answer 1 · answered Sep 04 '19 at 12:40

0

If this is component/class and you arrow function, this will be undefined because there will be no parent context to use.

use normal function:

submitForm: function(pay_method, useWalletCredit, onSuccess, onFailure) {
   ...
}

answered Sep 04 '19 at 12:40

jcubic

61,973
54
229
402

useWalletCreadit defined in states at the top. this is why it needs this, to point to useWalletState. – MHB Sep 04 '19 at 12:47
@MHB can you show your whole code then? `this` is definitelly undefined, as error say. – jcubic Sep 04 '19 at 12:51

score 0 · Answer 2 · answered Sep 04 '19 at 12:41

0

You are using an arrow function. Arrow functions do not create their own this object, instead inheriting from their outer scope.

It's also weird (to me, without further context) that you do not have any this object to work with, as I'd expect that the value of useWalletCredit would be undefined.

You needn't have this problem though, since you can simply refer to useWalletCredit directly.

answered Sep 04 '19 at 12:41

Nnanyielugo

401
4
13

useWalletCreadit defined in states at the top. this is why it needs this, to point to useWalletState. – MHB Sep 04 '19 at 12:46
1

Please post the contents of the entire file, or maybe just the skeleton of the enclosing component and the state. Are you using a class component or a functional one? I'll need more information than you're providing. – Nnanyielugo Sep 04 '19 at 12:50
Besides, you'll have to access a state property from the state itself rather than from the `this` object. I fail to see how you can do that though, since `this` is undefined. I'll definitely need more information. – Nnanyielugo Sep 04 '19 at 12:52

ncaught TypeError: Cannot read property ' ' of undefined

2 Answers2