How to fix 'x is not a function' in react

Question

I'm stuck and don't understand what happens. I have 2 similar codes (look below). First works fine. But second gives error (codes minimized):

Unhandled Rejection (TypeError): self.loadCustomersAction is not a function

First (works fine):

...
import { loadCustomers } from '../../actions'

export class Component extends React.Component {
    componentDidMount() {
        this.props.loadCustomersAction()
    }
    render() {
        return (
            ...
        )
    }
}
const mapDispatchToProps = dispatch => {
    return {
        loadCustomersAction: () => dispatch(loadCustomers())
    }
}

export default connect(
    ...,
    mapDispatchToProps
)(withRouter(Component))

Second (gives error):

import { loadCustomers } from '../../actions'

export class Component2 extends React.Component {
    render() {
        return (
            ...
            <PrimaryButton onClick={this._handleSubmit} text="Add" />
            ...
        )
    }
    _handleSubmit = () => {
        var self = this
        axiosWithProgress.post(...).then((response) => {
            self.props.loadCustomersAction() // error here
        })
    }
}

const mapDispatchToProps = dispatch => {
    return {
        loadCustomersAction: () => dispatch(loadCustomers())
    }
}

export default connect(
    null,
    mapDispatchToProps
)(withRouter(Component2))

Who can tell me what wrong? I tried almost all options from google and stackoverflow, but unsuccessfully.

UPD: changing self.props.loadCustomersAction() to this.props.loadCustomersAction() don't solve problem.

UPD: passing ownProps in mapDispatchToProps too.

Maybe it's the order of HOCs, that props are not delegated correctly. Try wrapping `withRouter(connect(…))` instead and in `mapDispatchToProps`, do: `(dispatch, ownProps) => ({ loadCustomsAction: …, ...ownProps })` — Andrew Li, Aug 31 '19 at 17:33
Same result :( `loadCustomersAction: (dispatch, ownProps) => dispatch(loadCustomers(), ...ownProps)` and `withRouter(connect(null, mapDispatchToProps)(DialogAddCustomer))` — Vyacheslav Stefanovich, Aug 31 '19 at 18:11

score 1 · Answer 1 · answered Aug 31 '19 at 17:38

1

You have to call the function on this.props not self.props, as you don't statically assign the function to your class (instance).

So change:

self.props.loadCustomersAction()

into

this.props.loadCustomersAction()

answered Aug 31 '19 at 17:38

Webber

2,796
2
20
26

I'm afraid we need more code. I tried to reproduce your problem, but this works fine. [code sandbox](https://codesandbox.io/s/clever-worker-ris0p) also please note that your error may not be up to date, because your code never references `self.loadCustomersAction`. – Webber Sep 01 '19 at 09:20

score 0 · Answer 2 · answered Sep 02 '19 at 12:50

maybe your code is not able to get/use this in the function, try using normal function syntax and bind the function in constructor. this might work.

or change <PrimaryButton onClick={this._handleSubmit} text="Add" /> to <PrimaryButton onClick={this._handleSubmit.bind(this)} text="Add" /> i hope this works.

score -2 · Answer 3 · answered Aug 31 '19 at 17:45

Redux creates global states (variables as well as functions), which can be accessed through the this.props variable and the this operator.

Self is used to approach objects available in the current window and not the global states/props. So, you need to replace this

self.props.loadCustomersAction()

to

this.props.loadCustomersAction()

Difference between self and this : Difference between this and self in JavaScript

How to fix 'x is not a function' in react

3 Answers3